SCSS编译冲突怎么解决？CSS Modules混淆技巧

SCSS的嵌套语法（如&）只是提升代码可读性的“语法糖”，根本无法解决CSS类名全局污染和样式冲突问题——无论嵌套多规范，编译后仍是普通全局类名，极易被同名规则覆盖；真正起作用的是CSS Modules机制，它在构建阶段将`.card__header`等类名自动混淆为`Card_header__abc123`这类唯一标识符，实现样式作用域隔离。但这一能力绝非开箱即用：必须严格满足三大条件——文件命名含`.module.scss`、构建工具（Webpack/Vite）正确配置模块化处理、JS/TS中以`import styles from '...'`方式引入并使用映射对象，否则所有混淆努力都将失效；同时需注意，Sass的`@use`仅解决变量/mixin层面的命名冲突，与CSS Modules的运行时类名隔离互不替代，二者需协同使用才能彻底终结样式混乱。

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单文件组件里的