sass 与 css modules 可叠加使用，关键在文件名必须为 .module.scss、用 import styles from './x.module.scss' 导入、并通过 classname={styles.xxx} 动态绑定。
sass 和 CSS Modules 不是互斥方案，而是可以叠加使用的组合。真正要启用的是「Sass + Modules」，不是“Sass 或 CSS Modules”。
为什么 import './Button.scss' 不生效？
因为默认 import './Button.scss' 是全局引入，类名不隔离、无哈希、会污染全局样式。哪怕文件后缀是 .scss，只要没走 Modules 机制，就和写 import './Button.css' 效果一样。
关键判断点：是否用了 .module.scss 后缀 + import styles from 语法。
- ✅ 正确路径：
Button.module.scss+import styles from './Button.module.scss' - ❌ 错误路径：
Button.scss+import './Button.scss'（全局作用域） - ❌ 错误路径：
Button.module.scss+import './Button.module.scss'（没解构对象，styles 是 undefined）
如何让 .module.scss 正确编译并启用 Modules？
Create React App（CRA）5.0+ 和 Vite 默认支持 .module.scss，但前提是已安装 sass（Dart Sass）。Node Sass 已废弃，不要用。
- 运行
npm install sass（不是node-sass） - 确保文件名严格为
xxx.module.scss（大小写敏感，.module.中间不能多空格或拼错） - 引用必须是
import styles from './X.module.scss'，不是import './X.module.scss' - 使用时必须通过
className={styles.xxx}，不能硬写字符串className="xxx"
示例：
/* Button.module.scss */
.button {
padding: 8px 16px;
background: #007bff;
}
.primary {
background: #28a745;
}
// Button.jsx
import styles from './Button.module.scss';
function Button({ primary }) {
return (
<button classname="{styles.button" styles.primary :>
Click
</button>
);
}
遇到 className="" 或 className="undefined" 怎么办？
这是最常见也最隐蔽的问题：Modules 没生效，但控制台不报错，只默默返回 undefined。
- 检查文件名是否真的是
Button.module.scss（不是Button.modules.scss、button.Module.scss或Button.scoped.scss） - 检查 import 路径大小写是否匹配（macOS/Linux 下
button.module.scss≠Button.module.scss） - 检查 SCSS 文件里写的类名是否和
styles.xxx中的xxx完全一致（比如写了.btn却用了styles.button） - 不要在
.module.scss里用@import引入非 module 文件——它不会被模块化，且可能破坏哈希生成
能否在 .module.scss 里覆盖第三方库样式？
可以，但必须用 :global() 显式声明，否则会被模块化规则过滤掉。
- 错误写法：
.ant-btn { color: red; }→ 编译后变成类似Button_module__ant-btn__abc123，无法命中 Ant Design 原始类名 - 正确写法：
:global(.ant-btn) { color: red; } -
:global只作用于括号内选择器，不影响其后代（如:global(.ant-btn) span中的span仍会被模块化）
注意：:global 是逃逸机制，用多了等于放弃 Modules 的核心价值——局部作用域。优先考虑用组件 props 控制样式，或封装带样式的 wrapper 组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
