必须用:global(.btn)显式声明才能跳过局部作用域，漏括号（如:global .btn）会被当作嵌套选择器，导致.btn仍被哈希化；:global()括号内选择器原样输出，支持多类名批量声明，但不可与局部选择器混用或嵌套。
直接写 .btn 不生效，必须用 :global(.btn) 显式声明——否则它会被编译成带哈希的局部名，和你期望的全局类完全不匹配。
为什么 :global(.btn) 必须带括号、不能漏写
漏括号（比如写成 :global .btn）会被 css-loader 当作嵌套选择器处理，.btn 依然走局部化流程，最终生成类似 _btn_abc123 的类名，根本达不到“全局”目的。括号是语法边界，表示“括号内整个选择器跳过模块作用域”。
-
:global(.btn)✅ 编译后保留原样.btn -
:global(.btn-primary, .btn-secondary)✅ 支持多类名批量声明 -
:global .btn❌ 变成局部嵌套规则，.btn被哈希 -
:global(.btn) .icon❌ 后半段.icon仍被局部化
如何安全覆盖第三方组件库样式（如 Ant Design / Element Plus）
这类组件的 DOM 常动态挂载到 document.body 下，脱离你的组件树。单纯在子组件的 .module.css 里写 :global(.ant-modal) 很可能因加载顺序或作用域链断裂而失效。
- 把覆盖规则提前 import 到 Layout 或入口文件（如
App.module.css），确保它早于组件库 CSS 加载 - 若仍不生效，退一步：把规则挪到非 module 的
index.css，并确认它在组件库 CSS 之后引入 - 极端情况加
!important，但只限单属性，且必须写在:global()规则内部：:global(.ant-modal) { z-index: 10000 !important; } - 禁止写
.my-wrapper :global(.ant-modal)——:global不能嵌在局部选择器里
和 :local() 混用时最容易踩的坑
:local() 是默认行为，显式写出来反而容易误导。关键在于：每个简单选择器的作用域是独立计算的，不是整条规则“开关式”切换。
立即学习“前端免费学习笔记（深入）”；
-
:local(.card) .card-header→.card局部化，.card-header也局部化（没声明就是默认:local） -
:global(.card) .card-body→.card全局，但.card-body又掉回局部，找不到 - 正确写法是：
:global(.card .card-body)或分开写两行：:global(.card) { ... }+:global(.card-body) { ... } - 不要在同一个选择器里混用修饰符：
:local(.a):global(.b)是非法语法
构建产物重复注入问题怎么避免
Webpack 的 mini-css-extract-plugin 在多入口场景下，若多个模块都写了 :global(.reset)，最终打包出的 CSS 里就会出现多份相同规则——这不是 bug，但会增大体积、干扰调试。
- 真正需要全局的样式（重置、工具类、第三方覆盖），应单独拆成非 Modules 的 CSS 文件（如
styles/globals/reset.css），在入口统一引入 - 模块内只用
:global()做少量、精准的穿透控制，比如.modal :global(.ant-modal-body)这种带作用域限定的写法 - Webpack 配置中可启用
modules.exportGlobals: true，让:global类也能被 JS 导出，但需谨慎评估必要性
最常被忽略的是：:global 不是“引入外部样式”，而是“声明本文件中的某段规则属于全局作用域”。滥用它等于主动放弃 CSS Modules 的隔离价值，最后维护成本远高于初期省下的几行代码。
