SCSS中!default不生效，是因为变量已被更早定义；它仅在首次声明时赋值，若node_modules或additionalData中已定义同名变量，则直接跳过。
!default 不生效，90% 是因为变量已经被更早定义了——它不是“覆盖”，而是“抢占式赋值”，一旦错过首次声明时机，就彻底失效。
为什么 $color-primary: #007bff !default 没起作用
SCSS 编译器只在第一次遇到 $color-primary 这个名字时检查有没有 !default；如果此前已在任何地方（哪怕在 node_modules/element-plus/theme-chalk/src/common/var.scss 里）执行过 $color-primary: #409eff;，那你的 !default 行直接被跳过，不报错、不警告、也不提示。
- 用 VS Code 全局搜索
$color-primary:，重点看node_modules下是否有提前定义 - 运行
grep -r "\$color-primary:" src/ node_modules/（macOS/Linux）确认实际加载顺序 - 检查是否在
vite.config.ts的css.preprocessorOptions.sass.additionalData中注入了同名变量——它比你项目里的@use或@import更早执行 - 避免在多个文件里重复写
$color-primary: ... !default，这会让最终值取决于不可控的编译顺序
@use 场景下 $var: value !default 报错 “This variable was not declared with !default”
这是 @use 的设计约束：只有带 !default 的变量才允许在 with 子句中被覆盖。如果你写的模块里是 $spacing: 1rem;（没加 !default），然后在别处写 @use "vars" with ($spacing: 1.5rem);，Sass 就会拒绝并抛出该错误。
- 想支持外部覆盖，必须在源模块中显式写
$spacing: 1rem !default; -
@use默认创建私有作用域，!default只在当前模块内有效，无法被外部@use文件直接修改 - 若需跨模块共享变量，考虑改用
@forward+!default组合，或退回到@import（注意全局污染风险）
在 :root 里用 SCSS 变量必须插值 #{$var}
SCSS 变量不能直接出现在 CSS 自定义属性的值位置。--color: $primary; 会被原样输出为字面量字符串，不是颜色值，最终生成的 CSS 无效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是
--color: #{$primary};，让 Sass 在编译期展开为真实值 - 计算函数也得包在
#{}里，例如--bg-light: #{lighten($primary, 10%)} - 插值只发生在编译期，JS 运行时读不到这个过程——CSS 变量的运行时更新和 SCSS 变量是两套逻辑
真正容易被忽略的是：SCSS 变量的作用域完全由编译顺序决定，而不是文件路径或 import 位置的“视觉先后”。哪怕你把自定义变量文件放在最顶部，只要构建工具（如 Vite）通过 additionalData 注入了同名变量，它就赢在起跑线。调试时别只盯自己写的代码，先查终端输出的 @debug 结果，再确认变量到底是在哪一行、哪个 scope 被首次赋值的。
