!default不起作用是因为变量已被提前定义，它仅在sass首次解析到该变量名时生效；常见原因包括ui库提前声明、additionaldata注入、@use私有作用域限制及:root中未用#{}插值。
!default 不起作用，基本就是变量已经被定义过了——它不是“覆盖”，而是“抢占式赋值”，只在 Sass 第一次见到该变量名时才生效。
为什么 $color-primary: #007bff !default 没生效
因为项目里某处（哪怕在 node_modules 里）已经执行过 $color-primary: #333 或类似赋值。Sass 编译器按顺序解析，一旦变量名已绑定值，!default 就被完全跳过，不报错、不警告、也不提示。
- 用 VS Code 全局搜索
$color-primary:，重点检查node_modules/下的 UI 库（如element-plus的_variables.scss） - 检查
vite.config.ts中是否通过css.preprocessorOptions.sass.additionalData注入了同名变量——它比你自己的@import更早执行 - 确认没在同一个文件里先写
$color-primary: red;，再写$color-primary: blue !default;（语法合法但无效）
@use 场景下 !default 报 “This variable was not declared with !default”
这是 @use 的设计约束：只有带 !default 的变量，才允许在 with 子句中被覆盖。如果你模块里写的是 $spacing: 1rem;，外部却写 @use "vars" with ($spacing: 1.5rem);，Sass 就会拒绝。
- 修复方式：把模块内变量声明改为
$spacing: 1rem !default; - 注意：
@use默认创建私有作用域，!default只在当前模块内有效，无法被外部@use覆盖——想全局覆盖，得用@import+ 正确顺序 - 别混用：
@use "a"; @import "b";会导致作用域断裂，b里定义的变量对a不可见
在 :root 里导出 CSS 变量时 $var 不生效
SCSS 变量不能直接出现在 --color: $primary; 这种位置，会被当成字面字符串，最终生成无效 CSS。
- 必须用插值：
--color: #{$primary}; - 计算值也要包住：
--color-light: #{lighten($primary, 10%)}; -
!default对 CSS 自定义属性（--xxx）完全无效——那是运行时逻辑，得靠var(--color, #333)实现兜底 - 别写
$--color: #fff !default;，SCSS 不允许--开头的变量名，会编译失败
真正难调试的点，往往不是语法写错，而是构建流程里多个地方悄悄定义了同名变量——比如 Vite 的 additionalData、UI 库的自动 import、uni-app 的 uni.scss 加载机制，三者叠加后，你改的那行 !default 可能连编译器的“第一次见到”都排不上队。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
