CSS Modules + SCSS 必须满足三个硬性条件：文件名带 .module.scss、import styles from './X.module.scss'、禁用字符串写法 className="xxx"；import './Button.scss' 不会局部化，因 CRA/webpack 仅对 .module.css/.module.scss 启用模块化逻辑，否则样式全局注入无隔离。
CSS Modules + SCSS 能用，但必须满足三个硬性条件：文件名带 .module.scss、import styles from './X.module.scss'、不用 className="xxx" 直接写字符串。
为什么 import './Button.scss' 不会局部化？
CRA 或 Webpack 默认只对 .module.css 和 .module.scss 启用模块化逻辑。哪怕你用了 SCSS 语法，只要文件名是 Button.scss，它就等同于全局 CSS——所有类名裸奔，毫无隔离可言。
- 错误写法：
import './Button.scss'→ 样式注入<head>，全局生效 - 正确写法：
import styles from './Button.module.scss'→ Webpack 识别后启用css-loader的modules模式 - 注意：CRA v2+ 原生支持，无需改 webpack 配置；自建项目需确认
css-loader的modules: true已开启
.module.scss 里能用嵌套和变量吗？
能，但嵌套（如 .container { .item { } }）不是原生 CSS Modules 支持的特性，而是 SCSS 解析器处理的。只要你的构建链路里有 sass-loader，嵌套就照常工作——但最终生成的哈希类名只作用于最外层选择器。
- SCSS 变量（
$primary-color）和 mixin 可正常导入使用，推荐从src/theme/variables.scss统一引入 - 嵌套内部的选择器不会被哈希，比如
.container .item中的.item仍依赖父级类名的哈希结果，实际输出类似Button_container__abc12 .item - 别指望
:global(.reset) { ... }写在嵌套块里——它只能出现在顶层，否则会被忽略
styles.xxx 动态拼接会失效？
会。因为 styles 是编译期生成的普通 JS 对象，键名固定，运行时不存在“动态键查找”机制。
立即学习“前端免费学习笔记（深入）”；
- 错误：
className={styles['btn-' + type]}→ 大概率undefined，DOM 上没 class - 正确方式：提前定义好所有可能的类，在 SCSS 里用
@if或组件内用条件判断：className={type === 'primary' ? styles.primary : styles.secondary} - 如果真要动态组合多个类，用
clsx或classnames库：className={clsx(styles.button, type === 'large' && styles.large)}
想复用其他组件的样式怎么办？
CSS Modules 默认不互通，styles 对象只包含当前文件定义的类。强行跨模块引用（如 import otherStyles from '../Other.module.scss' 然后 className={otherStyles.xxx}）技术上可行，但违背封装原则，且容易因哈希变化导致不可靠。
- 推荐做法：把公共样式提成
shared.module.scss，再分别import - 慎用
@import在 SCSS 里引入另一个.module.scss文件——它不会合并哈希逻辑，反而可能造成重复或冲突 - 第三方组件（如 Ant Design）的样式重置，必须用
:global()包裹，且只能写在顶层规则中
最容易被忽略的一点：哈希类名是构建时确定的，开发阶段热更新可能滞后，有时改了 SCSS 但 DOM 上类名没刷新——这时清掉 node_modules/.cache 或重启 dev server 才能生效。
