:global()在CSS Modules中失效的主因是构建工具未识别该语法，如css-loader<6.0或Vite配置modules:false；其次需确保选择器写法正确（仅紧邻完整片段生效），且避免与Vue scoped/styled-components混用导致解析中断。
:global() 为什么在 CSS Modules 里完全没反应
最常见原因是构建工具压根没识别到 :global()，直接当无效语法跳过了。比如 Webpack 的 css-loader 版本低于 6.0，或 Vite 中显式配置了 css: { modules: false } —— 此时整个文件都不走 CSS Modules 流程，:global() 自然无从生效。
另一个隐蔽问题是：你写的规则被整条丢弃了，不是它“没生效”，而是根本没进编译输出。打开构建产物（如 dist/assets/index.*.css），搜索 .ant-btn 或你期望的原始类名，如果找不到，说明 :global() 没起作用，得回头查 loader 配置或版本。
- Webpack 用户检查
css-loader是否 ≥ 6.0，并确认modules配置为{ mode: 'local' }或启用auto - Vite 用户检查
vite.config.ts里是否误写了css.modules = false - 用
console.log或 DevTools 的 Network 面板确认最终加载的 CSS 文件确实包含你写的:global()规则
:global(.btn) 这种写法为什么还是不匹配 DOM
:global() 不是万能通配符，它只对括号内**紧邻的完整选择器片段**生效。写成 .wrapper :global(.btn) 或 :global(.btn):hover 都会失败——前者让 .btn 逃逸，但 .wrapper 仍是局部类，浏览器找不到这个组合；后者把伪类 :hover 暴露在外，编译后变成 .btn_xyz:hover，而 DOM 中只有 .btn。
- ✅ 正确：
:global(.btn)、:global(.ant-modal .ant-modal-header)、:global(.btn:hover) - ❌ 错误：
.my-comp :global(.btn)（前面的.my-comp是局部类，DOM 中不存在） - ❌ 错误：
:global(.btn):focus（:focus没被包裹，仍按局部规则处理） - ❌ 错误：
:global(.btn), .other（逗号后.other不受:global()影响）
覆盖 Modal/Tooltip 这类挂载到 body 的第三方组件样式
这类组件的 DOM 节点脱离 React/Vue 树，即使你在组件内部 import 了 .module.css，其生成的全局规则也可能因加载顺序靠后而被覆盖。更麻烦的是，某些框架（如 antd）的样式是 JS 动态插入的，时机不可控。
立即学习“前端免费学习笔记（深入）”；
- 把
:global()规则提前 import 到根组件或main.tsx/App.vue，确保它在第三方库样式之后、但早于子组件模块加载 - 若仍无效，退到普通
index.css（非 module），并用<link rel="stylesheet">显式控制加载顺序，保证它在组件库 CSS 之后 - 极端情况加
!important，但只能加在:global()规则内部，例如：:global(.ant-modal) { z-index: 10000 !important; } - 避免用
:global(*)或:global(body)—— 语法非法，构建会报错
和 Vue scoped / styled-components 混用时的边界断裂
:global() 是 CSS Modules 的机制，它和 Vue 的 <style scoped>、styled-components 的 injectGlobal 完全不兼容。如果你在一个 Vue 单文件组件里同时写了 <style scoped> 和 <style module>，或者在 React 里混用 css-loader Modules 和 styled-components，:global() 很可能被外层作用域拦截，根本不会进入 css-loader 的解析流程。
真正难调试的点往往不在语法本身，而在构建链路里某个 loader 悄悄跳过了 :global() 解析，或者多个样式系统共存时作用域边界被误判。遇到失效，先确认构建产物里那段 CSS 是否真的保留了原始类名，而不是被哈希或删掉了。
