CSS Modules 默认对类名局部作用域化，使同名全局类无法匹配；需用 :global() 显式声明全局类，且仅作用于括号内选择器，支持多选择器但不跨选择器生效，须注意构建工具配置与样式污染风险。
全局类名在 CSS Modules 中为何默认失效
CSS Modules 默认会对所有类名做局部作用域处理，比如 .button 会被编译成类似 _button_abc123 的唯一哈希名。这意味着你在组件内写的 .button，和全局 CSS 文件里定义的 .button 完全不是同一个选择器——即使名字一样，也匹配不到。
:global() 包裹后才能跳过局部化
要在 CSS Modules 文件中声明一个「不被哈希」的类，必须显式用 :global() 包裹。它不是函数调用，而是伪类语法，只对括号内的选择器生效：
.container {
padding: 1rem;
}
:global(.highlight) {
background-color: #ffeb3b;
}
:global(.btn-primary), :global(.btn-secondary) {
border-radius: 4px;
}
上面的 .highlight、.btn-primary、.btn-secondary 都会原样输出，不会加哈希，可被其他地方或全局样式覆盖/复用。
-
:global()只影响紧邻其后的选择器，不能跨选择器生效（比如:global(.a) .b中的.b仍会被局部化） - 支持嵌套写法：
:global(.modal) :global(.close)表示两个都全局；但更推荐拆开写，避免歧义 - 不能在
@keyframes或@media内部直接用:global()，需把要全局的类名提到外层
和 :local() 搭配使用时的边界问题
CSS Modules 默认就是 :local()，所以 :local(.foo) 和 .foo 等价。但混合使用时容易误判作用域：
:local(.card) {
margin: 1rem;
}
:global(.card-header) {
font-weight: bold;
}
/* ❌ 错误：下面这行里的 .card-body 仍被局部化 */
:global(.card) .card-body {
padding: 0.5rem;
}
/* ✅ 正确：需要把 .card-body 也包进 :global() */
:global(.card .card-body) {
padding: 0.5rem;
}
注意：CSS 选择器的局部/全局属性是按“每个简单选择器”单独计算的，不是整条规则统一开关。
Webpack / Vite 中启用 global 语法的前提
:global() 是 CSS Modules 规范的一部分，但依赖构建工具正确解析。常见配置坑点：
- Webpack 的
css-loader必须开启modules且版本 ≥ 3.x；旧版可能静默忽略:global() - Vite 默认启用 CSS Modules，但若在
.module.css外的文件里写:global()，不会生效——它只在模块化 CSS 文件中起作用 - PostCSS 插件（如
postcss-preset-env）若开了 `stage: 0`，可能提前解析掉:global()导致失效，建议关掉或明确排除
真正容易被忽略的是：全局类一旦声明，就彻底脱离模块边界——它可能意外污染其他组件，或被第三方 UI 库的同名类覆盖。别为了图省事把大量基础样式都塞进 :global()，该抽成独立全局 CSS 的，就单独抽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
