SCSS的&不能防止类名冲突，因其仅是父选择器占位符，编译后仍生成全局类名；真正防冲突需依赖CSS Modules，它在构建阶段将.card__header重命名为Card_header__abc123等唯一标识符。
SCSS本身不解决类名冲突，编译后仍是全局类名；真正起作用的是CSS Modules——它在构建阶段把.card__header重命名为类似Card_header__abc123的唯一标识符。
为什么&嵌套写得再规范也防不住冲突
SCSS的&只是语法糖，用于生成结构清晰的类名（如.card__body），但编译后这些类名仍暴露在全局CSS作用域中。两个不同文件里都写了.card { &__title { } }，最终CSS里就会出现两段同名规则，后加载的会覆盖前加载的。
- 常见错误现象：
Header.module.scss和Modal.module.scss都用&__title，但没启用CSS Modules，结果编译出两个.header__title，样式互相干扰 - 关键判断：只要文件后缀不是
.module.scss（或.module.css等），&再怎么嵌套，都不具备隔离能力 - Vue单文件组件里的
<style scoped></style>也不处理&逻辑——它只给选择器加[data-v-xxx]属性，并不改类名本身
启用CSS Modules必须满足的三个硬条件
光改文件名不够，Webpack/Vite需要明确识别并启用模块化处理，否则.module.scss会被当普通SCSS对待，类名原样输出。
- 文件命名：必须是
.module.scss（或.module.css、.module.less），不能是Card.module.scss却配错loader规则 - 构建配置：Webpack中
css-loader需开启modules: true，且localIdentName建议设为[path]_[name]__[local]___[hash:base64:4]，避免短哈希碰撞 - Vite默认支持，但若项目自定义了
css.modules配置，需确认pattern匹配到了.module.*，例如pattern: /\.module\.(css|scss|less)$/i
import方式不对，$style就拿不到混淆后的类名
CSS Modules导出的是一个对象，原始类名作key，混淆后类名作value。如果导入方式错了，JS里根本访问不到正确类名。
立即学习“前端免费学习笔记（深入）”；
- React中必须用
import styles from './Button.module.scss'，然后写className={styles['btn--primary']}或启用camelCase后用styles.btnPrimary - Vue中要写
<style module></style>（注意不是<style scoped module></style>），并在模板中用:class="$style.btn" - 错误示范：
import './Button.module.scss'——这只会加载样式，不返回映射对象，$style或styles都是undefined
混淆类名在调试时怎么定位源文件
开发时看到Card_header__abc123这种类名，很难对应到哪个SCSS文件。这不是bug，是CSS Modules的正常行为，但可通过配置保留可读性。
- 开发环境建议把
localIdentName设为[name]__[local]___[hash:base64:3]，比如button__primary__aBc，至少能看出组件和修饰符 - 开启Source Map：确保
css-loader和sass-loader都启用sourceMap: true，浏览器开发者工具就能点类名跳转到原始SCSS行 - 注意Vite的
css.devSourcemap默认关闭，需显式设为true；Webpack则依赖devtool和loader配置协同生效
混淆类名不是为了让人“看不懂”，而是让机器能区分作用域。真正容易被忽略的是：一旦用了@use引入Sass变量或mixin，它们和CSS Modules无关——@use解决的是Sass层的命名污染，而类名混淆解决的是CSS运行时的命名冲突，两者要配合用，不能互相替代。
