直接 import 'bootstrap/dist/css/bootstrap.css' 会污染全局样式，因其类名无命名空间且构建工具不重写；Vue 的 scoped 样式无法隔离外部 CSS；真正隔离需在构建时用 Sass/LESS 套命名空间并确保根容器应用该类。
为什么直接 import 'bootstrap/dist/css/bootstrap.css' 会污染全局样式
因为 Bootstrap 的所有类（如 .btn、.container、.row）都是无命名空间的全局选择器，Webpack 或 Vite 在打包时不会自动重写它们——哪怕你用的是 Button.module.css，它也只管自己文件里的类，对已注入的 Bootstrap CSS 完全无感。结果就是：你的 .container 和 Bootstrap 的 .container 碰上就打架，谁后加载、谁特异性高，谁赢。
Vue 中用 <style scoped></style> 能隔离 Bootstrap 吗
不能。scoped 样式只作用于当前组件的 <style></style> 块内定义的规则，它不拦截、不重写、也不包裹外部引入的 CSS 文件。你写了 <style scoped>.my-btn { color: red }</style>，这没问题；但 import 'bootstrap/dist/css/bootstrap.css' 仍会把 .btn 注入到 ，和你 scoped 的任何东西无关。
- scoped 只能保护「你自己写的样式」不被外部影响，不能保护「你自己渲染的 DOM」不被 Bootstrap 影响
- 如果你在模板里写
<button class="btn"></button>，那无论有没有 scoped，都会命中 Bootstrap 的全局.btn - 想让
.btn只在某个区域生效？必须用 LESS/Sass 重编译 Bootstrap 源码，套上命名空间（如.my-app .btn），而不是靠 Vue 的 scoped
React 里开启 CSS Modules 后，还能用 .btn 吗
可以，但得明确区分用途：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- Bootstrap 的
.btn是全局类，你 import 它之后，所有写className="btn"的地方都会被匹配——CSS Modules 完全不管这个 - 你自己写的
Button.module.css里的.btn，会被编译成类似Button_btn__abc123这样的唯一哈希名，只能通过styles.btn访问 - 别混用：写
className="btn"是调全局；写className={styles.btn}是调你模块里的局部类——两者完全不互通 - 如果非要复用 Bootstrap 的视觉但又不想全局污染，推荐用
clsx组合：className={clsx('btn', 'btn-primary', styles.myCustomMod)}，前提是确认'btn'确实是你想继承的全局样式
真正隔离 Bootstrap 样式，必须动构建链路
所谓“隔离”，不是靠加载顺序或 !important 补救，而是让每个 Bootstrap 类都带上父级约束。这只有在源码编译阶段才能可靠实现：
立即学习“前端免费学习笔记（深入）”；
- 用 Sass：把整个
bootstrap.scss包进一个命名空间块，比如.app-ns { @import "bootstrap"; }，然后确保 HTML 根元素有class="app-ns" - 用 LESS：同理，
.app-ns { @import "bootstrap.less"; } - 注意变量（如
--bs-primary）不会被自动前缀，需手动覆盖或用:root.app-ns重新声明 - JS 组件（Modal/Dropdown）会失效，因为它们内部硬编码查找
.modal，而你现在实际是.app-ns .modal——必须传入自定义 selector 或改用封装库（如bootstrap-vue-3）
最易被忽略的一点：命名空间隔离后，栅格系统（.col-md-6）依赖父容器宽度计算，如果外层没加命名空间类，子元素加了，width: 50% 会按错误的父宽算——所以命名空间必须从根容器开始，不能只贴在组件内部。
