直接 import css 文件会导致样式冲突，因同名类名在全局作用域下互相覆盖；css modules 通过哈希化和局部作用域绑定解决，需正确配置 css-loader 的 modules 选项并使用 module.css 后缀及 import styles 方式引用。
为什么直接 import CSS 文件会导致样式冲突
因为全局作用域下，同名类名会互相覆盖。比如两个组件都定义了 .button，打包后只保留最后一个生效的规则，谁在后面谁赢——这和你写 JS 时不会期望 const utils = {...} 被另一个文件的同名变量覆盖是一个道理。
CSS Modules 的核心不是“加功能”，而是“关开关”：它默认把每个 .css 文件里的类名自动做哈希化 + 局部作用域绑定，相当于给每个类名加了组件 ID 前缀。
常见错误现象：
- 开发时样式正常，构建后按钮变样 → 没启用 CSS Modules，或配置漏了 modules: true
- 类名在 DOM 里显示为 Button_button__abc123，但自己写的 className="button" 不生效 → 忘了从模块 import 类名，还在用字符串字面量
如何在 Webpack 中正确启用 CSS Modules
关键不是“怎么配”，而是“在哪配”：必须配在 css-loader 的 options.modules 里，且不能被其他 loader（比如 postcss-loader）的位置干扰。
实操建议：
- 确保 css-loader 版本 ≥ 5.0，旧版用 modules: true，新版推荐用 modules: { mode: 'local' }
- 如果同时用 Sass，sass-loader 必须放在 css-loader 之前，顺序错了模块化就失效
- 不要给 CSS Modules 文件起名 index.css 或 style.css，容易和普通 CSS 混淆；约定用 Component.module.css
示例配置片段：
module: {
rules: [{
test: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { modules: { mode: 'local' } }
}
]
}]
}
React 中怎么正确引用 CSS Modules 类名
不是 import './Button.css'，而是 import styles from './Button.module.css' —— 这个 styles 是一个对象，键是原始类名，值是生成后的哈希类名。
常见错误：
- 写成 className="button" → 永远不生效，因为真实类名已是 Button_button__xYz78
- 在 styled-components 或 emotion 里混用 styles.button → 它只是字符串，不是样式对象，不能直接当 props 传
- 动态拼接类名，比如 className={`button ${isPrimary ? 'primary' : ''}` → 'primary' 不是模块导出的，得写成 {styles.primary}
正确写法示例：
function Button({ children, isPrimary }) {
return (
<button classname="{`" styles.primary : styles.secondary>
{children}
</button>
);
}
怎么处理全局样式、第三方库或 :global() 场景
CSS Modules 默认封死全局，但现实绕不开：重置样式、Ant Design 覆盖、伪类动画、媒体查询……这时候得主动“开窗”，而不是硬扛。
实操要点：
- 全局重置或基础工具类，单独建 base.css，不用 .module.css 后缀，也不用 import 到组件里，直接在入口 JS 里 import './base.css'
- 要在模块文件里局部透出某几个类？用 :global(.highlight) 包裹，它里面的类名不哈希化
- 想复用第三方类名（比如 ant-btn），别试图在 .module.css 里写 .ant-btn → 它不会被识别为依赖，应改用 composes 语法继承：
.myButton {
composes: ant-btn from 'antd/lib/button/style/index.css';
}
- 注意
composes 只能继承同级或外部 CSS 文件中的类，不能跨 @import 链路传递容易被忽略的一点：CSS Modules 对 @keyframes 和 @font-face 默认不作用域化，它们天然全局，无需 :global() —— 但名字重复仍会冲突，建议命名加前缀，比如 myComponent-spin
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
