不能将 bootstrap.css 当作 css modules 使用，否则类名被哈希化导致 classname="btn btn-primary" 失效；应让 bootstrap css 走全局作用域，自定义样式用 .module.css 模块化，通过 loader 配置严格分离作用域。
不能直接用 CSS Modules 包裹 Bootstrap 的 bootstrap.css，否则所有类名会被哈希化，className="btn btn-primary" 就会完全失效——这是最常踩的坑。
为什么不能把 bootstrap.css 当成 .module.css 用
CSS Modules 的设计目标是隔离组件样式，它会把每个 .btn 编译成类似 btn__abc123 的唯一类名。但 Bootstrap 的 HTML 结构（比如 <button classname="btn btn-primary"></button>）依赖的是全局、确定的类名字符串。一旦你写 import styles from 'bootstrap/dist/css/bootstrap.css'，styles.btn 就是 undefined，按钮直接“没样式”。
- Webpack 默认对
.css文件不启用 modules，除非你手动配置modules: { auto: true }或匹配/\.module\.css$/——而这个配置恰恰不该覆盖第三方 CSS - 即使强行开启，Bootstrap 内部大量使用嵌套选择器（如
.btn-group > .btn）、属性选择器（[disabled]）、伪类（:hover），CSS Modules 无法处理这些上下文关系 - 所有 Portal 组件（Modal、Tooltip）渲染到
body下，脱离 React 组件树，CSS Modules 生成的 scoped 类根本作用不到它们身上
正确做法：分离作用域，明确分工
让 Bootstrap 的 CSS 走全局作用域，你的定制样式走模块化或 CSS-in-JS。关键在 Webpack / CRA 的 loader 配置边界。
- 确保
css-loader的modules选项只对.module.css或.scss生效，例如：{ test: /\.module\.css$/, use: [ ..., { loader: 'css-loader', options: { modules: true } } ] } -
bootstrap/dist/css/bootstrap.min.css必须用普通import，且放在src/index.js顶部，早于任何自定义样式导入 - 你的业务组件样式文件统一命名为
Button.module.css、Card.module.css，用import styles from './Button.module.css'导入，只覆盖该组件内局部结构 - 如果真要改 Bootstrap 的视觉表现（比如把所有
.btn-primary背景换成紫色），别动 CSS，去改 Sass 变量——新建src/custom.scss，按顺序@importfunctions/variables/mixins/bootstrap，并重定义$primary
覆盖时怎么避免被 Bootstrap “压死”
即使你写了 .my-btn { background: purple !important; }，也容易在复杂嵌套中失效，因为 Bootstrap 大量使用高特异性选择器，比如 .btn-group > .btn 比 .my-btn 权重高。
- 优先用更具体的类组合，比如
.my-btn.btn.btn-primary，而不是单纯靠!important - 在
index.html或index.js中确保自定义 CSS 的import在 Bootstrap 之后，利用“后声明胜出”规则 - 对 Portal 渲染的内容（如 Modal body），全局类名必须生效，所以你的覆盖规则也得是全局的，比如在
src/index.css里写：.modal-content { border-radius: 12px; }，而不是塞进某个 module 文件 - 开发时用浏览器 DevTools 的“Computed”面板看最终生效的规则来源，确认是不是被
bootstrap.min.css里某条.btn:focus或.btn:active覆盖了
真正难的不是“怎么写覆盖代码”，而是守住作用域边界：Bootstrap 类名必须全局可查，你的模块样式必须严格限定在组件内部。一旦混淆这两层，调试成本会指数上升——尤其是当 Modal 打开后发现按钮圆角没了，而你正在 Button.module.css 里疯狂加 !important 的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
