根本原因是变量声明顺序和作用域不匹配：!default仅在变量首次被定义时生效，若此前已在其他文件或模块中赋值（如ui库提前import、additionaldata注入或@use私有作用域），则跳过赋值且无提示。
!default 变量为什么没被覆盖
根本原因不是语法写错了，而是变量声明顺序和作用域不匹配。$color-primary: #007bff !default 这行代码只有在 Sass 编译器“第一次见到这个变量名”时才起作用；一旦前面某处（哪怕在另一个 @import 文件里）已经执行过 $color-primary: #333，!default 就直接跳过，不会报错也不会提醒。
常见踩坑点：
- 第三方 UI 库（如
element-plus或nutui-uniapp）的_variables.scss被提前@import，你自己的重写文件反而在它后面 - 在
vite.config.ts里用css.preprocessorOptions.sass.additionalData注入了变量，结果它比你项目里的@use更早生效 - 用了
@use而非@import，但没意识到@use默认创建私有作用域，!default只在模块内有效，无法被外部覆盖
Bootstrap 中覆盖默认变量的正确 import 顺序
Bootstrap 的 _variables.scss 全部用 !default 声明，但它只接受“在它自己被 @import 之前”的覆盖。也就是说，你不能把它当普通文件改，也不能把它放在 Bootstrap 主入口之后。
必须这样组织你的主 SCSS 入口（比如 app.scss）：
@import "~bootstrap/scss/functions"; @import "@/styles/_custom-variables.scss"; // ← 放这里！必须紧接 functions 后、variables 前 @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/root";
关键点：
-
@import "~bootstrap/scss/functions"必须最先，因为variables里会用到map-get等函数 -
_custom-variables.scss里只写你要改的变量，比如$primary: #2563eb !default;，其余留空让 Bootstrap 默认兜底 - 不要删掉 Bootstrap 的
variables—— 它负责定义所有未被你覆盖的变量
@use 场景下 !default 报错 “This variable was not declared with !default”
这是 Vite + Sass 模块化中最典型的报错，本质是 @use 的设计约束：只有带 !default 的变量才允许在 with 子句中被覆盖。如果你写的模块里是 $spacing: 1rem;，然后在别处 @use "vars" with ($spacing: 1.5rem);，Sass 就会拒绝并抛出该错误。
修复方式很直接：
- 打开你被
@use的变量文件（比如_variables.scss），把所有想支持外部覆盖的变量补上!default，例如：$font-size-base: 1rem !default; - 确认你没在
@use之前定义同名变量 ——@use不吃全局污染，它只认模块内声明 - 如果用的是第三方库（如 Bulma），先查它的源码或文档：没加
!default的变量，with语法就不可用，只能换@import或改构建配置
:root 中使用 Sass 变量必须插值
很多人以为写进 :root 的 CSS 自定义属性能自动识别 Sass 变量，结果编译后发现 --color-primary: $primary; 变成字面量字符串，浏览器根本解析不了。
必须显式插值：
:root {
--color-primary: #{$primary};
--bg-hover: #{darken($primary, 10%)};
}
注意：
-
#{$primary}是编译期行为，生成的是纯 CSS 值（如#007bff），不是运行时 JS 可读的变量引用 - 计算函数（
lighten、rgba等）也得包在#{}里，否则 Sass 不会展开 - 如果变量本身是 map 或 list，要先用
map-get或nth提取再插值，不能直接#{$map}
真正难调试的从来不是语法对错，而是变量在哪一行、哪个模块、哪个作用域被首次赋值 —— 编译器不会告诉你，但 @debug $var 会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
