!default是编译期“首次抢占”机制，仅在变量从未被赋值时生效；一旦此前已被定义（如ui库、additionaldata或前置@import中），后续所有!default声明均被静默跳过，不报错、不警告。
变量已被提前定义，!default 直接跳过
!default 不是“覆盖”，而是“首次抢占”：Sass 编译器按顺序扫描代码，一旦遇到同名变量的赋值（哪怕只是 $color-primary: #333;），后续所有 $color-primary: red !default; 都会被静默忽略——不报错、不警告、也不提示。
常见提前定义位置包括：
-
node_modules/中 UI 库的_variables.scss（如 Element Plus 的$--color-primary: #409EFF !default;） - Vite 的
vite.config.ts中通过css.preprocessorOptions.sass.additionalData注入的变量 - UniApp 自动加载的
uni.scss（若存在且含同名变量） - 同一文件中先写
$color: blue;，后写$color: red !default;（语法合法但无效）
import 顺序错误，主题变量没抢到“第一次”
SCSS 变量生效依赖严格的 @import 顺序。如果你在 @import "element-plus/theme-chalk/src/index" 之后才定义 $--color-primary，那它永远没机会生效——因为 Element Plus 内部的 !default 已在导入时完成首次赋值。
正确做法必须是：
- 新建
src/styles/element-variables.scss - 第一行就写
$--color-primary: #1890ff !default; - 第二行立即
@import "element-plus/theme-chalk/src/index";
注意：!default 必须出现在所有含该变量的 @import 之前，否则编译器根本不会“看到”你的声明。
:root 中漏写插值 #{}，SCSS 变量变字符串
在 CSS 自定义属性里直接写 --primary-color: $primary; 是无效的。Sass 不会识别这种用法，最终生成的 CSS 是字面量 --primary-color: $primary;，浏览器无法解析。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
必须显式插值：
- 错误：
--primary-color: $primary; - 正确：
--primary-color: #{$primary}; - 计算值也要包住：
--primary-light: #{lighten($primary, 10%)};
这个错误常被误判为“变量没生效”，其实是编译输出了非法 CSS，DevTools 的 :root 里根本看不到该属性。
@use 场景下变量未声明 !default，with 子句被拒绝
使用 @use 时，Sass 要求：只有带 !default 的变量，才允许在 with 子句中被覆盖。比如模块里写的是 $spacing: 1rem;，外部却写 @use "vars" with ($spacing: 1.5rem);，Sass 会直接报错 This variable was not declared with !default。
解决方法只有两个：
- 模块内把变量改成
$spacing: 1rem !default; - 或改用
@import+ 严格顺序控制（@use的私有作用域限制更严）
真正难定位的问题，往往不是你写的那一行错了，而是构建链路里多个环节（Vite 插件、UI 库自动 import、框架预加载）悄悄完成了变量定义——你连“第一次见到”的机会都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
