CSS Modules 不能引入第三方 CSS 库，需分离构建路径：Webpack 中为 node_modules/.css 单独配置 modules: false，Vite 需避免误设 css.modules: false；覆盖时用 :global(.ant-btn) 限定作用域，伪类须连写，且 :global 不校验类名正确性。
CSS Modules 本身不能“引入”第三方 CSS 库，只能隔离你自己的模块文件；想让第三方库（如 Ant Design、normalize.css）不污染全局，必须绕过 Modules 处理流程，单独控制其作用域。
为什么 import './node_modules/antd/dist/reset.css' 会炸掉整个页面样式
CSS Modules 默认会对所有匹配 .css 的文件启用局部化。如果你在 Webpack 中把 modules: true 配在了全局 /\.css$/ 规则下，那么 reset.css 里的 html、body、h1 全都会被哈希重命名——结果就是全局重置失效、字体消失、布局塌陷。
- 错误配置示例：
{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] }→ 所有 .css 都模块化 - 正确做法：只对
/\.module\.css$/启用 modules，第三方 CSS 走另一条不带 modules 的规则 - Vite 用户注意：
css.modules设为false会禁用全部模块化，不是“仅关第三方”的开关
如何安全引入 Ant Design / Element Plus 等 UI 库的样式
这些库的 CSS 本就是为全局设计的，不能也不该进 Modules 流程。关键在于“分离构建路径”：
- Webpack：新增一条
test: /node_modules\/.*\.css$/规则，modules: false，且放在.module.css规则之前（避免被覆盖） - Vite：默认已区分，但若你手动加了
css.modules: false，得删掉；确认node_modules下的 CSS 没被.module.css后缀误匹配 - React 组件内覆盖时，用
:global(.ant-btn)套在局部容器里，而不是直接写.ant-btn—— 这样既保留库样式，又限制影响范围
想给第三方类名加前缀？别碰 :global() 做批量包裹
:global(.ant-btn) { color: red; } 是合法的，但 :global(.ant-*) 不是通配语法，CSS Modules 不支持。试图用它给一整套类名加前缀，只会让编译失败或静默忽略。
立即学习“前端免费学习笔记（深入）”；
- 真正能批量加前缀的方案是 PostCSS 插件，比如
postcss-prefixwrap，配合#my-app包裹整个 antd.css 文件输出 - 更轻量的做法：在组件根元素上加唯一 ID 或 class，比如
<div id="app-with-antd">...</div>，然后写#app-with-antd :global(.ant-btn) - 注意：伪类必须连写，
#app-with-antd :global(.ant-btn):hover✅，:global(.ant-btn):hover❌（hover 会被当成局部类处理）
最常被忽略的一点：CSS Modules 的 :global() 是“声明本文件中某段规则属于全局”，不是“导入外部类名”。它不校验那个类名是否存在，也不检查是否拼错——写成 :global(.ant-buton) 一样能编译通过，但运行时无效。真要确保第三方类名可用，得靠浏览器开发者工具实时看 DOM 上实际存在的 class 字符串。
