.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() 不是函数，是伪类语法，只对括号内紧邻的选择器生效，且不能跨选择器传递作用域：
-
:global(.btn)→.btn原样输出，可被外部匹配 -
:global(.card) .body→.card全局，但.body仍被局部化（⚠️常见误写） -
:global(.card .body)→ 两者都全局，等效于原生写法 - 嵌套中混用
:local()要格外小心：:local(.card) :global(.header)是合法的，但反过来容易混淆作用域边界
构建工具配置不一致会导致 :global() 彻底失效
Webpack/Vite 对 :global() 的支持依赖 loader 配置。比如 Webpack 的 css-loader 必须开启 modules.auto 或显式指定 mode: 'local'，否则 :global() 可能被忽略或报错；Vite 默认支持，但若你手动配了 css.modules 并设为 false，整个模块化逻辑就退化了。
- 检查
css-loader版本是否 ≥ 6.0（旧版对:global()解析不完整） - Vite 用户注意：在
vite.config.ts中若写了css: { modules: false }，CSS Modules 就没启用，:global()也就没意义 - 使用
@import引入非 Modules 文件时，其中的:global()不会受当前文件模块化影响，但容易引发样式污染
和 Vue/React 的 scoped 样式别混着用
CSS Modules 的 :global() 和 Vue 的 ::v-deep、React 的 :global（styled-components）机制不同，不能互相替代：
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件里写
<style module></style>+:global(.btn)是 OK 的；但写<style scoped></style>+:global(.btn)就无效——scoped 不识别这个语法 - React 中用
css-loader启用 Modules 后，:global()生效；但若用styled-components，就得改用injectGlobal或主题方案 - 最易踩坑的是：在同一个项目里同时启用 Vue scoped 和 CSS Modules，结果两个隔离层叠加，
:global()被外层 scoped 拦截，根本进不了编译流程
真正难调试的点往往不在语法本身，而在构建链路里某个 loader 悄悄跳过了 :global() 解析，或者多个样式系统共存时作用域边界被误判。遇到失效，先确认构建产物里那段 CSS 是否真的保留了原始类名，而不是被哈希或删掉了。
