必须通过CDN或全局import引入Bootstrap CSS，因其类名设计为全局作用域且JS插件硬编码依赖原生类名；业务组件须用CSS Modules隔离，禁用.btn等通用类名，改用.myapp-button等唯一前缀。
直接用 import 'bootstrap/dist/css/bootstrap.min.css' 就会污染全局，因为 Bootstrap 的类名（如 .btn、.container）不加哈希、不隔离，和你项目里任意一个 .btn 冲突是分分钟的事——这不是“没配好”，是设计上就默认走全局作用域。
为什么 Bootstrap CSS 不能套用 CSS Modules？
CSS Modules 要求文件名带 .module.css 后缀 + import styles from 'xxx.module.css'，但 Bootstrap 官方发布的 CSS 文件（比如 bootstrap.min.css）压根不是模块格式：它没有导出对象，也不参与构建时的类名哈希。你硬改成 bootstrap.module.css 并用对象解构导入，Webpack/Vite 会报错或返回空对象——styles.btn 是 undefined。
更关键的是，Bootstrap 的 JS 插件（如 Modal）内部硬编码依赖原生类名（data-bs-toggle="modal"、.dropdown-menu），一旦你用 CSS Modules 改了类名，插件直接失灵。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
-
className={styles.btn}渲染为空字符串，按钮没了样式 - Dropdown 点击无反应，控制台报
Cannot read property 'querySelector' of null - 自定义组件里的
.row被 Bootstrap 的栅格规则覆盖，布局错乱
正确引入 Bootstrap 样式且避免污染的三种路径
核心原则：**Bootstrap 的 CSS 必须走全局，你的业务组件必须走局部隔离**。二者不能混在同一个作用域里。
✅ 推荐方案（按优先级排序）：
-
CDN 引入 Bootstrap CSS：在
public/index.html中，把<link>放在所有自定义 JS bundle 之前，确保它最早进head；你的组件全用 CSS Modules（.module.css），天然隔绝 -
npm + 入口文件导入：在
src/index.js或src/App.js顶部写import 'bootstrap/dist/css/bootstrap.min.css'，注意别放在某个组件里——否则加载时机不可控，容易被 HMR 打乱顺序 -
按需导入 Sass 源码（适合定制强的项目）：安装
bootstrap和sass，新建src/custom-bootstrap.scss，只@import 'bootstrap/scss/functions'; @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/buttons';，然后import './custom-bootstrap.scss'—— 这样打包体积可控，且仍为全局作用域
如何防止你的组件被 Bootstrap 类名意外覆盖？
即使 Bootstrap 走全局，你的组件仍可能中招：比如你写了 .btn { padding: 8px; }，而 Bootstrap 的 .btn 在后面加载，就会覆盖你；或者你用了 .container，和 Bootstrap 的同名类冲突。
实操要点：
- 永远不用通用类名：
.btn、.row、.col、.text-center—— 这些是 Bootstrap 的“保留字”，你的组件样式文件里禁止出现 - 给组件根元素加唯一前缀，比如
.myapp-button、.myapp-layout，再用 BEM 延伸：.myapp-button__icon - 如果必须覆盖 Bootstrap 某个行为（比如改
.btn-primary背景色），不要在组件里写，而是统一在主题文件（如src/theme.scss）里用:root变量或!important（仅限此处），并确保该文件在 Bootstrap 之后加载 - 用浏览器开发者工具的 “Computed” 面板看最终生效的规则来源，快速定位是哪个 CSS 文件在打架
真正难的不是“怎么让 Bootstrap 工作”，而是接受它必须活在全局——CSS Modules 不是万能胶，强行套用只会让 Modal 打不开、下拉菜单点不动。把框架样式当空气，专注写好你自己的 .module.css，才是 React 项目里最稳的隔离姿势。
