!default失效是因为变量已被提前定义，它仅在Sass首次解析到该变量名时生效；常见原因包括UI库、additionalData注入、@use未声明!default及:root中未用#{}插值。
变量已被更早定义，!default直接被跳过
!default 不是“覆盖”或“回退”，它只在 Sass **第一次解析到该变量名** 时起作用。一旦此前任何地方（哪怕在 node_modules 里）已执行过 $primary: #007bff; 这类赋值，你的 $primary: #ff6b35 !default; 就完全失效——不报错、不警告、也不提示。
常见提前定义来源包括：
-
element-plus、bootstrap等 UI 库的源码文件（如node_modules/element-plus/theme-chalk/src/common/var.scss） -
vite.config.ts中css.preprocessorOptions.sass.additionalData注入的变量（它比你项目里的@import更早执行） - 同一文件中前面已写过
$primary: red;，后面再写$primary: blue !default;（语法合法但无效）
验证方法：用 VS Code 全局搜索 $primary:，重点看 node_modules/ 下是否已有定义；或运行 grep -r "\$primary:" src/ node_modules/（macOS/Linux）确认实际加载顺序。
@use 场景下 !default 报错 “This variable was not declared with !default”
这是 @use 的设计约束：只有源模块中显式声明为 $spacing: 1rem !default; 的变量，才允许在 @use "vars" with ($spacing: 1.5rem); 中被覆盖。如果源文件里写的是 $spacing: 1rem;（没加 !default），Sass 就会拒绝并抛出该错误。
立即学习“前端免费学习笔记（深入）”；
同时注意：@use 默认创建私有作用域，!default 只在当前模块内生效，无法被外部 @use 文件直接修改。想跨模块共享可覆盖变量，得改用 @forward + !default 组合，或退回 @import（但需承担全局污染风险）。
:root 中直接写 $primary 导致 CSS 变量无效
SCSS 变量不能直接出现在 CSS 自定义属性的值位置。写成 --color: $primary; 会被原样输出为字面字符串，最终生成的 CSS 无效。
必须使用插值语法：
--color: #{$primary};--bg-light: #{lighten($primary, 10%)};
另外注意：!default 对 CSS 自定义属性（如 --theme-color）完全无效——那是运行时逻辑，兜底要用 var(--theme-color, #333)。也别写 $--color: #fff !default;，SCSS 不允许 -- 开头的变量名，会编译失败。
构建工具注入与编译顺序冲突
真正难调试的点，往往不是语法写错，而是构建流程里多个地方悄悄定义了同名变量。比如 Vite 的 additionalData、UI 库的自动 @import、uni-app 的 uni.scss 加载机制三者叠加后，你写的那行 !default 可能连编译器的“第一次见到”都排不上队。
典型陷阱：
-
additionalData: `@use "@/styles/variables.scss" as *;`看似能全局暴露，但如果variables.scss内部又@use "sass:math"，嵌套后as *失效 - 某些 IDE（如 VS Code）保存时自动删掉
@use末尾分号，导致注入代码语法错误，Sass 静默跳过 - HMR 缓存让已打开的
.vue组件没重载<style></style>块，改了变量也看不到效果
最稳的验证方式：进 node_modules/.vite/deps 或构建后的 dist/assets/xxx.css，查最终生成的 CSS 是否真用了你期望的颜色值——别只盯着控制台有没有报错。
