scss变量冲突必须用@use启用模块作用域解决，因@import仅为文本拼接，无作用域隔离，后定义的$color-primary会覆盖前者；@use通过命名空间强制私有化，如vars.$spacing-xs，混用@import则整文件降级为全局模式。
SCSS变量名冲突无法靠嵌套或文件拆分自动解决，必须用@use启用模块作用域，否则所有$variable都在全局扁平空间里互相覆盖。
为什么@import会让$color-primary变成“谁最后定义谁赢”
SCSS的@import只是文本拼接，不创建作用域。哪怕你把$color-primary写在_button.scss里，只要它被@import进主文件，就和_header.scss里的同名变量处于同一层级——编译器按顺序读取，后出现的声明直接覆盖前面的值。
- 常见错误现象：
_theme.scss定义$color-primary: #007bff;，_override.scss里又写$color-primary: #e74c3c;，结果整个项目按钮、标题、边框全变红 -
@import顺序不可控：Webpack/Vite中main.scss里@import "button"; @import "header";，但构建时可能因缓存或插件重排顺序 - 第三方库（如Bootstrap 5.2）仍依赖
@import，混用会导致整文件降级为legacy模式，@use完全失效
@use怎么真正锁住$spacing-xs不让别处改
@use让每个SCSS文件成为独立模块，变量默认私有，必须通过命名空间访问。这不是语法糖，是编译器强制的作用域隔离。
- 必须写在文件最顶部，不能包在
@if或选择器块里，否则报错Invalid CSS after "@use": expected "{", was ";" - 变量不加
as别名时，自动用文件名作命名空间：@use "vars";→ 访问vars.$spacing-xs - 想批量暴露所有成员？用
@use "vars" as *，但会破坏封装性，仅适合入口文件统一导出 - 旧项目迁移时，搜索并删掉所有残留
@import——哪怕只有一行，也会让整个文件退化为全局模式
类名冲突和变量冲突是两回事，别指望&__header能保护$z-index-modal
SCSS嵌套（&__header）只影响生成的CSS选择器结构，对$z-index-modal这类变量完全无效。变量作用域和类名作用域是两条平行线。
- 你在
_modal.scss里写$z-index-modal: 1050;，又在_tooltip.scss里写$z-index-modal: 1060;，只要两者都被@use进同一文件，后者必然覆盖前者 - 安全做法是加前缀：
$modal-z-index、$tooltip-z-index，或用@forward控制暴露范围，比如@forward "modal" hide $z-index-modal - 如果必须共享数值（如主题色），用
@function替代变量：@function modal-z-index() { @return 1050; }，函数调用不污染变量空间 - 动态计算值别用
@for循环生成一堆$spacing-1到$spacing-12变量，改用map+map-get按需取值
构建工具配置错误会让@use形同虚设
即使SCSS代码全用@use，如果构建链路没配对，sass-loader输出的CSS仍会被css-loader当普通样式处理，变量隔离就断在最后一环。
- Webpack中确认
css-loader配置不是{ modules: true }（已废弃），而是{ modules: { auto: true } }或{ mode: 'local' } - Vite用户检查
css.modules是否匹配/\.module\.(scss|sass|css)$/，否则Button.module.scss里的@use模块照样被当全局处理 - sass-loader输出必须流经css-loader的modules路径，中间不能被
style-loader提前截断或跳过 - TypeScript项目要补
declare module '*.module.scss'，否则import styles from './Button.module.scss'时styles类型为any，IDE无法提示可用类名
最容易被忽略的是：变量作用域只存在于SCSS编译阶段，一旦输出成CSS，$color-primary就彻底消失。所以@use再严格，也防不住运行时JS直接document.documentElement.style.setProperty('--color-primary', 'red')——这类CSS自定义属性冲突得靠命名前缀或:root作用域限定来解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
