Bootstrap CSS 全局污染源于其无命名空间的类选择器，构建工具无法重写，导致样式冲突；可靠隔离需 Sass 命名空间包裹、CSS-in-JS 动态注入或改用 react-bootstrap 等 JS 封装层。
为什么 import 'bootstrap/dist/css/bootstrap.css' 一定污染全局
因为 Bootstrap 的所有类（如 .btn、.container、.row）都是无命名空间的纯类选择器，Webpack 或 Vite 在打包时不会重写它们——哪怕你用了 Button.module.css，它也只处理自己文件里的规则，对已注入的 Bootstrap CSS 完全无感。结果就是：你的 .container 和 Bootstrap 的 .container 碰上就打架，谁后加载、谁特异性高，谁赢。
直接用 CDN + className="btn" 是最轻量但最危险的方式
在 public/index.html 里加 引入 Bootstrap CSS，JSX 中写 className="btn btn-primary"，确实能快速出效果。但隐患明显：
- 所有写
className="btn"的地方都会被匹配，不管它在哪个组件里渲染 - 无法按需加载，打包体积含大量未用样式（栅格、表单、动画等）
- 和你自己写的
.button类名冲突时，调试靠猜特异性，DevTools 里看不出来源
真正隔离必须动构建链路：Sass 命名空间包裹
想让 Bootstrap 样式只作用于某个区域（比如 Dashboard），唯一可靠方式是在源码编译阶段套上父级约束。Sass 是目前最可控的路径：
- 新建
src/scss/bootstrap-ns.scss，内容为：.dashboard-ns { @import "bootstrap"; } - 确保 Dashboard 组件根元素有
className="dashboard-ns" - 在
webpack.config.js或vite.config.ts中确认sass-loader/style-resources-loader已启用，并支持@import - 别漏掉变量重置：Bootstrap 的
:root变量（如--bs-primary）仍会全局生效，需手动覆盖或改用 CSS-in-JS 注入
动态 HTML 片段里用 all: unset 隔离 Bootstrap 影响
当用 dangerouslySetInnerHTML 渲染富文本，又怕 Bootstrap 的 p { margin: 0 } 把原文本段落撑变形，就得双向切断：
- 给容器加样式：
{ all: 'unset' }—— 这比all: inherit安全得多，它清空所有继承和默认 UA 样式 - 再显式恢复需要的属性，比如
font-family、line-height，否则文字可能不可读 - 注意：这不解决内部
.highlight泄漏问题，若 HTML 自带 class，仍需配合DOMPurify过滤或加前缀
最常被忽略的一点：CSS Modules 对第三方 CSS 完全无效。你给自己的 Button.module.css 起再规范的名字，也拦不住 import 'bootstrap/dist/css/bootstrap.css' 那一行悄悄把几百个全局类塞进 。隔离不是“不引入”，而是“怎么引入”——要么命名空间包裹，要么彻底不用 CSS，转用 react-bootstrap 这类 JS 封装层来接管样式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
