CSS Modules 不处理 node_modules 中的 CSS 文件，仅对 .module.css 文件做局部化编译；第三方样式需走全局流程，与 Modules 互不干扰。
因为 CSS Modules 本身不处理 node_modules 中的 CSS 文件，也不“引入”第三方样式——它只对后缀为 .module.css 的文件做局部化编译；直接 import 'antd/dist/reset.css' 这类语句，走的是构建工具的全局 CSS 处理流程，和 Modules 完全无关。
Webpack/Vite 默认跳过 node_modules 的 CSS
CSS Modules 是构建时行为，依赖 css-loader（Webpack）或内置 CSS 处理器（Vite）对匹配文件启用 modules: true。但几乎所有现代配置都默认排除 node_modules 目录：
- Webpack：
/\.css$/规则通常配了include: [path.resolve('src')]或显式exclude: /node_modules/ - Vite：默认不将
node_modules下的 CSS 视为模块，也不会对其应用modules配置 - 结果就是：你写的
import 'bootstrap.css'被当普通全局样式加载，而你的Button.module.css里写的.btn却被哈希成_btn_abc123—— 两者根本不在一个作用域里
:global() 不是“引入第三方样式”的手段
:global() 只允许你在 .module.css 文件中写一条「逃逸」规则，它不会把外部 CSS 内容拉进来，更不会恢复第三方库缺失的布局、间距、伪类等完整样式链：
- ✅ 有效：
:global(.ant-btn) { color: red; }→ 覆盖按钮文字颜色 - ❌ 无效：
:global(.ant-btn) { }→ 不会自动加载 antd 按钮的边框、padding、hover 状态 - ❌ 错误用法：
import styles from 'antd/dist/reset.css'→styles是空对象，因为该文件没走 Modules 流程，TS/JS 无法导出类名映射
真正生效的前提是“分离构建路径”
让业务样式走 Modules，第三方样式走传统全局流程，二者互不干扰：
立即学习“前端免费学习笔记（深入）”；
- Webpack：为
/\.module\.css$/单独配modules: true；另起一条规则匹配/node_modules\/.*\.css$/，且明确设modules: false - Vite：删掉
css.modules: false这种全局禁用项；确认未用别名把antd/dist/antd.css误导向.module.css后缀 - Next.js app 目录：第三方 CSS 必须在
use client组件外引入（如layout.tsx的head中），否则服务端 import 会报错
最常被忽略的细节：样式加载顺序和挂载点
即使配置正确，:global() 覆盖仍可能失效，原因往往不在语法：
- Modal、Tooltip 等浮层组件 DOM 插入到
document.body，脱离 React 树 → 你的.module.css文件若在子组件里 import，样式表可能晚于浮层渲染，导致未生效 - 第三方库 CSS 若通过
link标签异步加载（如 CDN），而你的:global()规则在 JS 打包的 CSS 中 → 加载顺序不可控，容易被覆盖 - 选择器权重不足时，别急着加
!important；先打开 DevTools → Elements → 找目标元素 → 看 Styles 面板里哪条规则被划掉，复制它的完整路径（比如.ant-modal .ant-modal-header button）再套进:global()
