必须用@forward+with，不能用@import：Element Plus等现代SCSS库已弃用@import，因其无法传递覆盖值且导致重复注入或编译失败；Dart Sass 3.0已彻底移除该语法；正确做法是先@forward原始变量文件并with注入新值，再@use index.scss as *加载样式。
必须用 @forward + with，不能用 @import
Element Plus 等现代 SCSS 库已弃用 @import，它无法传递覆盖值，且会导致变量重复注入或编译失败。Dart Sass 3.0 已彻底移除该语法。正确路径是：先 @forward 原始变量文件（如 var.scss），再用 with 注入新值。
常见错误现象：Invalid CSS after "with": expected "{", was "("——说明 Sass 版本低于 1.23；Undefined variable "$colors"——说明 @forward 位置不对，或未加 as * 导出。
-
@forward必须放在文件最顶部，早于任何@use或样式声明 -
with中只能传字面量（如#169BFA）或已定义变量（如$my-primary），不能传表达式（calc(#{$spacing-xs} * 2)非法） - 所有要覆盖的变量必须在原始文件中带
!default声明，否则with无效
with 覆盖值必须写在 @forward 的括号里
with 不是独立语句，它只属于 @forward 的一部分，语法形如：@forward "path" with ( $var: value )。漏掉括号、多写分号、或把 with 拆到下一行都会报错。
典型错误示例：
@forward "element-plus/theme-chalk/src/common/var.scss";<br>with ( $colors: (...) );→ 报错：Invalid CSS after "with"
立即学习“前端免费学习笔记（深入）”；
正确写法：
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': ('base': #169BFA),
'success': ('base': #31CF9A),
),
$font-size-base: 14px,
$border-radius-base: 6px
);- 嵌套 map（如
$colors）需保持结构一致，键名大小写、层级不能错 - 数值单位必须显式写出（
14px有效，14会变成无单位数字，可能被某些 mixin 拒绝） - 字符串值不用引号，但颜色、数字、布尔值直接写即可
@use index.scss as * 是关键收口步骤
仅 @forward + with 不够——它只修改了变量，没加载样式。必须紧接着 @use 组件源码文件，并用 as * 将其成员（mixins、classes、函数）全部注入当前作用域。
常见疏漏：
– 忘记 as *，导致 @include el-button 报错
– 在多个文件里重复 @use 'element-plus/...'，触发 "duplicate module" 编译错误
- 整个主题定制逻辑应只在一个入口 SCSS 文件中完成（如
src/assets/styles/element/index.scss） - 项目其他地方统一
@use "@/assets/styles/element/index.scss" as element或直接@use "@/assets/styles/element/index.scss" as * - 若配合按需导入插件（如
unplugin-vue-components），必须设importStyle: 'sass'，否则仍加载 dist 的静态 CSS，with完全失效
容易被忽略的加载顺序和 null 值陷阱
with 覆盖不是“运行时”行为，而是编译期变量替换。一旦变量值为 null 或未定义，插值 #{ $var } 就会报 Invalid null value for `#{}`。这通常发生在：
- 变量名拼错（
$color-primary写成$colors-primary） -
@forward的路径错误，导致原始变量根本没加载 - 在
with中引用了尚未声明的变量（比如$my-theme-color在with块里就用了，但它定义在后面）
建议在 with 前加 @debug $colors; 验证值存在；导出为 CSS 变量时务必用 --color-primary: #{ $color-primary };，而非 --color-primary: $color-primary;——后者会原样输出 Sass 语法，浏览器不认。
