!default是“首次赋值守门员”，仅在sass首次解析变量名时生效；若第三方库或additionaldata已提前定义同名变量，则后续!default完全失效。
!default 不是“覆盖开关”，而是“首次赋值守门员”——它只在变量第一次被 Sass 解析到时起作用；一旦第三方库（比如 element-plus 或 nutui）已在 node_modules 里先声明了 $color-primary，你项目里的 $color-primary: #007bff !default 就彻底失效。
为什么第三方库总抢在你前面定义变量
UI 库的 SCSS 入口文件（如 node_modules/element-plus/theme-chalk/src/common/var.scss）通常会被构建工具自动引入，且顺序早于你的自定义变量文件。Vite 的 css.preprocessorOptions.sass.additionalData 更是全局注入，比任何 @use 或 @import 都先执行。
- 用 VS Code 全局搜索
$color-primary:，重点看node_modules/下是否已有定义 - 终端运行
grep -r "\$color-primary:" src/ node_modules/确认真实加载顺序 - 检查
vite.config.ts中additionalData是否悄悄注入了同名变量
@use 场景下 !default 失效的真正原因
@use 默认创建私有作用域，!default 只在当前模块内生效，无法被外部 @use 直接覆盖。如果你在 vars.scss 里写的是 $spacing: 1rem;（没加 !default），然后在别处写 @use "vars" with ($spacing: 1.5rem);，Sass 会直接报错 “This variable was not declared with !default”。
- 想支持外部覆盖，必须在源模块中显式写
$spacing: 1rem !default; - 跨模块共享时，考虑改用
@forward "vars" with ($spacing: 1.5rem !default); - 混用
@use和@import会导致作用域断裂，@import定义的变量对@use模块不可见
:root 中写 SCSS 变量不生效的典型错误
SCSS 变量不能直接出现在 CSS 自定义属性的值位置。写 --color: $primary; 会被原样输出为字面字符串，不是颜色值，最终生成的 CSS 无效。
- 必须用插值：
--color: #{$primary}; - 计算函数也要包住：
--bg-light: #{lighten($primary, 10%)} -
!default对--xxx完全无效——那是运行时逻辑，得靠var(--color, #333)实现兜底 - 别写
$--color: #fff !default;，SCSS 不允许--开头的变量名，会编译失败
真正难调试的点，往往不是语法写错，而是构建流程里多个地方悄悄定义了同名变量——比如 Vite 的 additionalData、UI 库的自动 import、uni-app 的 uni.scss 加载机制，三者叠加后，你改的那行 !default 可能连编译器的“第一次见到”都排不上队。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
