Dart Sass升级后CSS变量（--）本身不失效，失效的是生成它们的Sass变量（$）因@use作用域隔离而未正确定义或插值。
升级 Dart Sass 后，你写的 --color-primary 这类 CSS 自定义属性（即“全局 CSS 变量”）本身不会失效——它们压根没被 Dart Sass 处理过。真正失效的，是你原本依赖 @import 全局注入的 $color-primary（Sass 变量），而它本该用于生成那些 --color-primary 的值。混淆这两者，是问题根源。
为什么 @use 后 --* 突然“找不到”了
这不是 CSS 变量丢了，是你生成它的那行 Sass 代码崩了。比如你以前在 main.scss 里写：
@import "variables";
:root {
--primary: $primary;
}
升级后 @import 被禁用，$primary 变成未定义，结果编译出的 CSS 是 --primary: $primary; —— 浏览器当然不认识这个字符串。
-
@use "variables" as v;之后，必须写v.$primary，直接写$primary就是 undefined - 如果用了
as *，要确认variables.scss文件里只含$xxx、@mixin、@function，不能有body { }这类 CSS 规则（否则会重复输出） -
:root { --primary: $primary; }必须改成:root { --primary: #{$primary}; }—— 缺少#{}插值，Sass 不会展开变量
--* 声明位置错误导致“看似失效”
CSS 变量生效与否，和 Sass 编译无关，只取决于最终 CSS 中的声明顺序和选择器范围。常见静默失效场景：
立即学习“前端免费学习笔记（深入）”；
- 在
:root里声明--bg，但深色模式切换时又在.theme-dark里重定义——如果.theme-dark规则没生效（比如 class 没加对），--bg就还是浅色值 - 组件内写
.card { --card-bg: white; }，但子元素用的是.card__header，而你在.card__header里又覆盖了一次--card-bg，结果.card__footer拿到的是 header 覆盖后的值 - 多个文件都写了
:root { --color: red; }，后加载的 CSS 文件里的声明会覆盖前面的——@use不改变这个顺序
为什么 $E: null 能修复 Element UI 主题报错
Element UI（或类似老库）的 SCSS 文件里大量使用 $E: ... !global，而 Dart Sass 2.0+ 禁止用 !global 声明新变量。报错不是因为 CSS 变量失效，而是整个 Sass 编译中断，根本没生成 CSS。
- 必须在项目最顶层的 SCSS 入口（如
index.scss）第一行写：$E: null; - 不能写在
@use后面，也不能写在嵌套块里，必须是文件级根作用域 - 这个
$E是 Element 内部逻辑用的 Sass 变量，和你的--e-primary没半点关系；别试图用它去控制 CSS 变量
最易忽略的一点：Sass 变量（$）和 CSS 变量（--）是两条完全不相交的流水线。前者在构建时被替换为字面值，后者在浏览器渲染时动态计算。想让后者“受控”，唯一办法是确保前者正确生成了前者——而 @use 改变的只是前者的可见性规则，不是后者的运行时行为。
