:global 是唯一可靠的全局样式出口，因其能绕过css modules的哈希化机制，确保第三方库、重置样式和基础工具类等全局样式正确生效，且必须置于规则开头。
为什么 :global 是唯一可靠的全局样式出口
CSS Modules 默认把所有类名转成哈希值（比如 button_primary__abc123），根本目的就是切断全局污染。但现实项目总得用第三方库（如 mdc-button）、重置样式或全局动画，这时硬写 .mdc-button 在 .module.css 里是无效的——它会被哈希化，浏览器找不到原类名。
唯一合规做法是显式用 :global 包裹：
-
:global(.mdc-button)→ 编译后仍是.mdc-button，能命中 Material Components 的原始类 -
:global(.reset) { margin: 0; }→ 不会被重命名，可安全用于通用重置 -
:global(.icon) { width: 16px; }→ 适用于需被多个组件复用、且不依赖模块上下文的图标基础样式
注意：:global 必须写在规则开头，不能嵌套；也不能写成 .my-class :global(.btn) —— 这种写法会被当成局部选择器处理，.btn 仍会哈希化。
cssModulesExcludes 配置不是“绕过模块化”，而是精准隔离
有些团队试图用 cssModulesExcludes: ['reset.css'] 让某些文件不走 Modules 流程，结果发现 reset.css 确实没哈希化，但问题来了：它和所有其他全局 CSS 一起被 Webpack 合并进同一个 style 标签，依然可能被后加载的样式覆盖。
真正该做的是分层管理：
- 把第三方库样式（如
@material/button/dist/button.css）单独 import 到_app.tsx或根 layout 中，确保加载顺序靠前 - 自定义重置/工具类写在
:global块里，放在某个核心base.module.css中，避免散落各处 - 绝对不要把
cssModulesExcludes设为['*.css']—— 这等于放弃 Modules，回到全局污染起点
第三方组件库样式穿透的两种真实解法
比如用了 Ant Design 的 Button，又想改它的内部 .ant-btn-primary 背景色，但直接写 :global(.ant-btn-primary) 可能失效——因为 Ant Design 的样式是通过 JS 动态注入的，加载时机晚于你的 :global 规则。
可行路径只有两个：
-
优先级压制：加权重，比如
:global(.ant-btn-primary) !important（仅限兜底，别滥用） -
透传式覆盖：用属性选择器提高 specificity，例如
:global([class*="ant-btn-primary"]) { background: #005f73 !important; } -
更推荐：查文档看是否支持主题变量（如 Ant Design 的
theme配置），从源头定制，比硬覆盖干净得多
别信“用 div > .ant-btn 就能精准定位”这种说法——Ant Design 内部结构可能随版本变动，selector 容易断。
Next.js 中重复样式表导致冲突的隐蔽原因
如果你在 Next.js（v14.2.x 及之前）看到同一份 Header.module.css 生成两个 <style></style> 标签，且其中一个类名哈希不同，那不是你代码写错了，而是构建时 css-loader 和 mini-css-extract-plugin 在 SSR/CSR 切换中触发了两次注入。
临时缓解方案：
- 升级到 Next.js
v14.3.0+（已修复该 pipeline 竞态） - 若无法升级，在
next.config.js中强制关闭 CSS 提取：experimental: { esmExternals: true }（仅限开发环境） - 绝对不要手动在
里再import一遍同名 module.css —— 这会雪上加霜
这类问题不会报错，但会导致 :global 规则被应用两次，z-index 错乱、颜色闪烁等现象往往根源在此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
