SCSS变量覆盖不生效是因为变量已被提前定义，!default仅在首次解析时赋值；需全局搜索同名变量、检查additionalData注入、确保:root中用#{}插值，且注意UniApp/Vue CLI的lang和路径约束。
SCSS变量覆盖不生效，基本就是你写的那行 $var: value !default 根本没被执行——它被前面同名定义拦下了，连“默认”机会都没有。
查变量是否已被提前定义
SCSS 的 !default 不是“设默认值”，而是“仅当变量从未被声明过才赋值”。一旦编译器在任何地方（包括 node_modules 里）先见到 $color-primary: #333，你后面所有 !default 都会被跳过，且不报错、不警告。
- 用 VS Code 全局搜索
$color-primary:，重点看node_modules/下的 UI 库（如element-plus的_variables.scss） - 检查
vite.config.ts中css.preprocessorOptions.sass.additionalData是否注入了同名变量——它比你自己的@import更早执行 - 别在同一个文件里先写
$spacing: 8px;，再写$spacing: 12px !default;，语法合法但完全无效
:root 中导出 CSS 变量必须插值
写 --color: $primary; 是错的。SCSS 不会自动展开变量，浏览器收到的是字面字符串 --color: $primary;，最终解析失败。
- 正确写法是
--color: #{$primary};，#{}是强制编译期展开的唯一方式 - 计算值也要包住：
--color-light: #{lighten($primary, 10%)}; -
!default对 CSS 自定义属性（--xxx）完全无效——那是运行时逻辑，兜底得靠var(--color, #333)
UniApp / Vue CLI 项目里变量静默失效
这类环境有硬性约束，不满足任一条件，变量就直接不进编译流程，连错误都不抛。
立即学习“前端免费学习笔记（深入）”；
-
<style>标签必须显式写lang="scss"，写成lang="css"或漏掉，SCSS 解析器压根不启动 - 变量名必须用短横线分隔（
$main-color），不能用驼峰（$mainColor）——小程序 CSS 解析器校验更严 -
uni.scss必须放在项目根目录（与pages.json同级），放错路径（如src/uni.scss）框架直接忽略 - 用
@import "@/styles/vars.scss";时，路径必须以@/开头且拼写准确；Vite 中若用additionalData注入，注意版本差异（v12+ 用additionalData，不是prependData）
真正难调试的点：构建流程里的“三重埋伏”
你改的那行 !default 很可能排不上“第一次见到变量名”的队——Vite 的 additionalData、UI 库的自动 @import、UniApp 的 uni.scss 加载机制三者叠加，谁先谁后取决于配置顺序和模块解析规则。这时候光看自己代码没用，得进 Sources 面板看实际编译输入流，或者临时加个空格保存变量文件触发 HMR 强制刷新。
