CSS Modules 无法隔离第三方全局样式，仅对显式导入的模块文件生效；Bootstrap 等通过 <link> 引入的样式仍全局生效，需通过命名空间包裹或运行时 container 配置实现作用域隔离。
CSS Modules 不会自动隔离第三方全局样式
这是最常被误解的一点：CSS Modules 只对 import './Button.module.css' 这种显式导入的文件生效，<link rel="stylesheet"> 引入的 Bootstrap CSS 完全不受影响。它不会给 Bootstrap 的 .btn、.container 加哈希，也不会阻止它们污染全局作用域。
常见错误现象包括：你在 Button.module.css 里写了 .btn，结果发现按钮样式被 Bootstrap 的 .btn 覆盖了——不是你写错了，是两个同名类同时存在于 DOM 中，浏览器按权重和顺序选了一个。
- CSS Modules 编译后生成类似
button_module__btn__jk3f9的类名，只用于你 import 的那个文件 - Bootstrap 的
.btn始终是原样输出，且在全局 scope 下生效 -
:global(.btn)是透出写法，不是隔离手段；它反而会让你的模块“主动加入”全局冲突
真正起效的隔离方式只有两种组合
要么让 Bootstrap 也进模块化流程（不现实），要么给它的样式加作用域边界。实践中只有以下两种路径能落地：
-
用命名空间包裹 + SCSS 编译重写：修改 Bootstrap 源码入口，在顶层套
:where(.my-bs) { @forward "bootstrap"; }，所有选择器自动变成:where(.my-bs) .btn，权重不变但作用域收窄 -
运行时指定 container + JS 配置：对 Modal、Tooltip 等动态插入 body 的组件，必须传
{ container: '.my-bs' }或设data-container=".my-bs"，否则它们的 DOM 根本不在你的命名空间内
别指望只给 HTML 根节点加 class="my-bs" 就完事——那只是挂了个空 class，Bootstrap 的 CSS 文件里还是满屏裸 .btn，没任何嵌套关系。
立即学习“前端免费学习笔记（深入）”；
动态类名拼接时容易漏掉前缀
当你在 React/Vue 中用模板字符串拼 Tailwind 或自定义工具类时，很容易只给业务类加前缀，却忘了 Bootstrap 类也需要统一处理。比如：
className={`tw-flex ${isOpen ? 'tw-hidden' : ''} btn btn-primary`}
这里 btn btn-primary 仍是裸类，直接撞上全局 Bootstrap 规则。正确做法是：
- 要么把 Bootstrap 类也纳入命名空间，如
my-bs-btn my-bs-btn-primary - 要么彻底弃用 Bootstrap 工具类，只用它的 JS 组件逻辑，样式全由 CSS Modules 或 Tailwind 承担
- 若用
@apply复用 Bootstrap 规则，需确认它是否在编译时已带命名空间（通常不带，得手动 wrap）
Scoped style 对 Bootstrap 无效
Vue 的 <style scoped> 或 React 的 CSS Modules 都无法拦截 Bootstrap 的全局注入。因为 Bootstrap 的 CSS 是在组件挂载前就通过 <link> 注入 <head> 的，scoped 的属性选择器（如 div[data-v-abc123]）只匹配组件自身渲染的节点，根本管不到 Bootstrap 动态 append 到 body 的 .modal-backdrop。
所以弹窗、下拉菜单、日期选择器这类组件，即使你用了 scoped，只要没配 container，样式就必然失效——这不是 bug，是作用域模型的天然限制。
复杂点在于：命名空间前缀要贯穿编译、JS 初始化、DOM 插入三个环节，漏掉任意一环，样式就断在某处。尤其要注意那些不走 data 属性、只靠 class 查找的 Bootstrap JS 方法（比如 getElementsByClassName('dropdown-menu')），它们不会自动识别 .my-bs .dropdown-menu。
