类名冲突不是scss的问题，而是未启用或未配对css modules；必须同时满足文件名是.module.scss、构建工具正确识别模块化、且scss中所有规则都基于&展开而不硬写原始类名。
直接结论：类名冲突不是 SCSS 的问题，而是没启用或没配对 CSS Modules。只要 .module.scss 文件被正确识别、import styles from './X.module.scss' 正确使用、且所有嵌套选择器都基于 & 展开（不硬写原始类名），冲突就不存在。
为什么 .module.scss 里写了 &__title 还是冲突
SCSS 的 & 只是编译时的语法糖，它本身不产生作用域隔离。如果文件后缀不是 .module.scss，或者构建工具（Webpack/Vite）没把它当模块处理，那 .card__title 就会原样输出到全局 CSS 中——两个组件都定义了 .card__title，后加载的就会覆盖前一个。
必须同时满足三点：
- 文件名带
.module.scss后缀（不能只是Card.scss或Card.module.css混用） - 构建配置中 css-loader（Webpack）或
css.modules（Vite）明确启用模块化，且 pattern 匹配到了.module.scss - SCSS 里所有规则都以顶层类名为起点，用
&:hover、&__content等方式展开，不单独写.button:hover
className={styles.button} 没生效，但 DevTools 显示类名是 Button_button__abc123
这说明 CSS Modules 已生效，但 JS 层引用错了。常见错误包括：
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
- 导入语句写成
import './Button.module.scss'（没接收导出对象），styles是undefined - 文件实际是
Button.scss，却在 JS 里按模块方式 import —— Webpack 不会重命名，DevTools 里看到的Button_button__abc123是假象（可能来自其他同名文件或缓存） - 类名含短横线（如
.btn-primary），但用了styles.btnPrimary访问，而没开启 css-loader 的camelCase选项；此时必须写styles['btn-primary']
多个类名拼接（className={`${styles.a} ${styles.b}`）导致组合样式失效
比如 SCSS 里写了 .a.b { color: red }，JSX 拼了两个类，但实际生成的是 A_a__x A_b__y，没有 A_a__x.A_b__y 这个组合选择器。
正确做法只有两种：
- 用
composes在样式层组合：.primaryButton { composes: button from './Base.module.scss'; color: red; }，然后 JSX 里只用styles.primaryButton - 改用
clsx+ 单一类名：clsx(styles.button, styles.primary)，但 SCSS 里不能依赖.button.primary，得把变体拆成独立类（.buttonPrimary）并单独定义样式
调试时看到 Button_header__3x7a9，怎么快速定位是哪个文件哪行写的
这不是 bug，是 CSS Modules 的正常行为。但开发阶段可以提升可读性：
- Webpack 用户：在
css-loader的modules.localIdentName配置中加入[path]和[name]，例如[path]_[name]__[local]___[hash:base64:4]，这样类名会带上相对路径和文件名 - Vite 用户：默认已包含
[name]和[local]，若仍难定位，可在vite.config.ts的css.modules里显式设置generateScopedName函数 - 终极技巧：在 SCSS 文件顶部加注释
/* @file ButtonHeader */，再配合浏览器 Elements 面板右键「Reveal in Sources」，能快速跳转
最易被忽略的一点：CSS Modules 的隔离能力完全依赖构建时的 loader 链路，哪怕 Sass 编译正确，只要 css-loader 没接收到模块标识，类名就一定不会混淆——别只盯 SCSS 写法，先确认构建链路是否真正“认出”了那个 .module.scss 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
