根本原因是构建工具未启用css modules，而非文件名或扩展名；需确保css-loader配置modules: { auto: true }或{ mode: 'local' }，并匹配.module.scss正则，否则.scss编译后仍为全局类名。
为什么 .module.scss 文件里写 .btn 还是会冲突
不是文件名或扩展名决定模块化，而是构建工具是否真正启用了 CSS Modules。哪怕你写了 Button.module.scss，如果 css-loader 配置里没开 modules: true，它就只是个普通 SCSS 文件——类名原样输出，.btn 仍会全局生效。
常见错误现象：
- 多个组件都 import
Button.module.scss和Modal.module.scss，但都定义了.close，结果视觉上行为不一致（比如一个变色，另一个没反应） - 第三方库（如 Ant Design）的
.ant-btn被你本地的.btn样式意外覆盖
根本原因：SCSS 编译器（sass-loader）只负责语法转换，模块化逻辑在 css-loader 层。必须确保 sass-loader 的输出被 css-loader 以 Modules 模式处理。
css-loader 的 modules 配置怎么写才生效
关键不是“加没加”，而是“加在哪一层”——css-loader 必须作用于 .module.scss 输出的 CSS 字符串，且不能被其他 loader 覆盖或跳过。
正确配置要点：
- 匹配规则要精确：用正则
/\.module\.(scss|sass|css)$/，避免误伤普通.scss -
modules必须设为对象形式，推荐{ auto: true }（Webpack 5.7+），它能自动识别.module.*文件名约定 - 如果用旧版 Webpack 或需自定义哈希，改用
{ mode: 'local', localIdentName: '[name]__[local]--[hash:base64:5]' } -
importLoaders: 2是必须的：因为.module.scss→sass-loader→css-loader，中间有两层 loader
错误示例：{ modules: true } —— 这是 Webpack 4 写法，Webpack 5+ 已废弃，会导致模块化静默失效。
SCSS 嵌套 + :global 混用时的坑
SCSS 支持嵌套写法，但和 CSS Modules 的 :global 一起用容易误判作用域边界。比如：
.container {
:global .ant-input {
border-color: red;
}
&__header {
color: blue;
}
}
这里 &__header 是局部的，但 :global .ant-input 是全局注入的——它不经过哈希，直接命中所有 .ant-input 元素，包括第三方组件内部的。
容易踩的坑：
- 在
:global里写深度选择器（如:global .modal .btn），结果把其他模块的.modal也改了 - 用
@import引入公共变量文件（如_variables.scss）没问题，但若在里面定义了.reset并被:global包裹，就会污染全局 -
:global只能包裹选择器，不能包裹 SCSS 嵌套块或 mixin 调用
如何验证 SCSS 模块化是否真生效
别只看文件名或 import 写法，直接检查浏览器里最终渲染出的 class 名：
- 打开 DevTools → Elements → 找到目标元素 → 看
class属性值是不是类似Button_primary_abc12这种带下划线和哈希的格式 - 如果还是
primary或btn，说明css-loader没接管这个文件，回退检查 loader 链顺序和 test 正则 - 在 JS 中打印
console.log(styles)，确认输出的是对象（如{ primary: "Button_primary_abc12" }），而不是空对象或原始字符串
最隐蔽的问题：Vite 或 Create React App 的默认配置对 .module.scss 支持不一致。CRA 2.0+ 默认启用，但如果你 eject 后手动改过 webpack.config.js，很可能删掉了 modules: { auto: true } 这一行——它不像注释那么显眼，却决定了整个模块化是否成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
