!default不生效是因为它仅在变量首次声明时赋值，若node_modules或additionaldata中已定义同名变量，则直接跳过；常见原因包括ui库提前声明、注入顺序靠前、@use模块未声明!default及:root中未用#{}插值。
为什么!default总不生效
它不是“覆盖”，而是“只在变量第一次出现时才赋值”。一旦$color-primary已在node_modules/element-plus/theme-chalk/src/common/var.scss里被写成$color-primary: #409eff;，你项目里写的$color-primary: #007bff !default;就彻底跳过——不报错、不警告、也不提示。
常见错误现象包括：深色主题变量没生效、自定义颜色始终是 UI 库默认值、@debug $color-primary输出的却是第三方库的值。
- 用 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: red;，再写$color-primary: blue !default;（语法合法但无效）
@use场景下!default报“This variable was not declared with !default”
这是@use的设计约束：只有源模块里明确写了!default，外部才能用with子句覆盖。比如你在vars.scss里写$spacing: 1rem;（没加!default），然后在别处写@use "vars" with ($spacing: 1.5rem);，Sass 就会拒绝。
想支持外部覆盖，必须在源模块中显式写$spacing: 1rem !default;；@use默认创建私有作用域，!default只在当前模块内有效，无法被外部@use文件直接修改。
- 若需跨模块共享变量，考虑改用
@forward "vars" with ($spacing: 1.5rem !default);组合 - 退回到
@import也能绕过限制，但要注意全局污染风险 - 别在
with子句里传未声明的变量名，比如$font-size在源模块里根本不存在，也会报错
:root里写$var不生效，是因为漏了插值
--color: $primary;会被原样输出为字面字符串，不是颜色值，最终生成的 CSS 无效。SCSS 变量不能直接出现在 CSS 自定义属性的值位置。
正确写法是--color: #{$primary};，让 Sass 在编译期展开为真实值；计算函数也得包在#{} 里，例如--bg-light: #{lighten($primary, 10%)}。
-
!default对 CSS 自定义属性（--xxx）完全无效——那是运行时逻辑，得靠var(--color, #333)实现兜底 - 别写
$--color: #fff !default;，SCSS 不允许--开头的变量名，会编译失败 - 插值只发生在编译期，JS 运行时读不到这个过程——CSS 变量的运行时更新和 SCSS 变量是两套逻辑
真正难调试的点：构建流程悄悄定义了同名变量
你改的那行!default可能连编译器的“第一次见到”都排不上队。Vite 的additionalData、UI 库的自动@import、uni-app 的uni.scss加载机制，三者叠加后，顺序完全不可控。
调试建议：在变量文件末尾加@debug $my-var;，看终端输出是否为你预期的值；如果输出的是node_modules里的值，说明它赢在起跑线。
- 新建
vars-base.scss，只放带!default的初始值：$primary-color: #1890ff !default; - 新建
vars-user.scss（或由构建脚本生成），写无!default的强制赋值：$primary-color: #ff6b6b; - 主入口严格按顺序
@import：@import 'vars-base.scss'; @import 'vars-user.scss';
变量的作用域完全由编译顺序决定，而不是文件路径或 import 位置的“视觉先后”。哪怕你把自定义变量文件放在最顶部，只要构建工具通过additionalData注入了同名变量，它就赢在起跑线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
