为什么CSS模块化后全局选择器突然失效？

.btn 在 CSS Modules 中不生效是因为类名被局部化为唯一哈希名，需用 :global(.btn) 原样输出；:global() 仅作用于括号内紧邻选择器，且依赖构建工具正确配置（如 css-loader ≥6.0、Vite 未禁用 modules）。

为什么 .btn 在 CSS Modules 里不生效

CSS Modules 默认把所有类名做局部作用域处理，.btn 会被编译成类似 .btn_abc123 的唯一哈希名。你写的 .btn 和全局 CSS 文件里定义的 .btn 根本不是同一个选择器——名字一样，但浏览器匹配不到。

:global() 怎么用才真正跳过局部化

:global() 不是函数，是伪类语法，只对括号内紧邻的选择器生效，且不能跨选择器传递作用域：

1. :global(.btn) → .btn 原样输出，可被外部匹配
2. :global(.card) .body → .card 全局，但 .body 仍被局部化（⚠️常见误写）
3. :global(.card .body) → 两者都全局，等效于原生写法
4. 嵌套中混用 :local() 要格外小心：:local(.card) :global(.header) 是合法的，但反过来容易混淆作用域边界

构建工具配置不一致会导致 :global() 彻底失效

Webpack/Vite 对 :global() 的支持依赖 loader 配置。比如 Webpack 的 css-loader 必须开启 modules.auto 或显式指定 mode: 'local'，否则 :global() 可能被忽略或报错；Vite 默认支持，但若你手动配了 css.modules 并设为 false，整个模块化逻辑就退化了。

1. 检查 css-loader 版本是否 ≥ 6.0（旧版对 :global() 解析不完整）
2. Vite 用户注意：在 vite.config.ts 中若写了 css: { modules: false }，CSS Modules 就没启用，:global() 也就没意义
3. 使用 @import 引入非 Modules 文件时，其中的 :global() 不会受当前文件模块化影响，但容易引发样式污染

和 Vue/React 的 scoped 样式别混着用

CSS Modules 的 :global() 和 Vue 的 ::v-deep、React 的 :global（styled-components）机制不同，不能互相替代：

1. Vue 单文件组件里写 + :global(.btn) 是 OK 的；但写 + :global(.btn) 就无效——scoped 不识别这个语法
2. React 中用 css-loader 启用 Modules 后，:global() 生效；但若用 styled-components，就得改用 injectGlobal 或主题方案
3. 最易踩坑的是：在同一个项目里同时启用 Vue scoped 和 CSS Modules，结果两个隔离层叠加，:global() 被外层 scoped 拦截，根本进不了编译流程

真正难调试的点往往不在语法本身，而在构建链路里某个 loader 悄悄跳过了 :global() 解析，或者多个样式系统共存时作用域边界被误判。遇到失效，先确认构建产物里那段 CSS 是否真的保留了原始类名，而不是被哈希或删掉了。