SCSS变量需用插值语法#{$var}才能用于CSS自定义属性，直接写$var无效；additionalData中必须用@use ".../variables.scss" as *;且路径正确、末尾分号、无换行；variables.scss仅含变量/混合/函数，禁用CSS规则。
为什么additionalData配置了变量却在CSS变量里用不了
SCSS变量不能直接写进CSS自定义属性值里，比如--text-color: $primary-color;这种写法永远无效——编译器不会自动解析SCSS语法到CSS字符串中。
必须用插值语法#{$primary-color}显式“展开”变量，否则它就只是个未被处理的符号。
-
--text-color: #{$primary-color};✅ 正确，会被编译成--text-color: #409eff; -
--text-color: $primary-color;❌ 错误，报Undefined variable或直接原样输出 - 插值只允许出现在属性值位置，不能用于选择器、
@media条件、@keyframes名称等地方 - 如果变量本身是CSS函数（如
rgba($primary-color, 0.8)），也要包在#{}里：--bg: #{rgba($primary-color, 0.8)};
additionalData注入后变量仍报Undefined variable
根本原因不是路径写错，而是注入语句本身不合法，或与当前SCSS模块系统冲突。
- 必须用
@use "@/styles/variables.scss" as *;，不能只写@use "@/styles/variables.scss";（缺as *会导致变量锁在命名空间里） - 路径必须经Vite别名解析成功，检查
vite.config.ts中resolve.alias是否正确定义了@指向src - 字符串末尾必须带分号，且不能用
\r\n换行（Windows下易出问题），建议统一用反引号+单行：additionalData: `@use "@/styles/variables.scss" as *;` - 避免混用
@import和@use：若variables.scss内部用了@import引入其他文件，可能触发Sass旧模式降级，导致作用域异常
如何让variables.scss真正“只提供变量”，不污染样式输出
这个文件一旦包含实际CSS规则（如body { margin: 0 }），就会被重复注入到每个组件样式中，造成样式爆炸和覆盖风险。
立即学习“前端免费学习笔记（深入）”；
- 只保留三类内容：
$xxx变量、@mixin xxx混合器、@function xxx函数 - 禁止写任何选择器、
@media、@keyframes或纯CSS声明块 - 如果需要全局基础样式（如重置、字体定义），应单独建
base.scss，并通过@import或@use显式引入到根样式文件（如main.scss），而非塞进additionalData - 验证方式：删掉
additionalData配置，手动在某个.scss文件开头加@use "@/styles/variables.scss" as *;，看是否还能用——能则说明文件本身没问题
多UI库变量覆盖时additionalData的顺序很关键
比如同时用Element Plus和自定义主题，@use 'element-plus/' with ()必须出现在additionalData最前面，否则Element Plus内部已用默认值锁定的变量无法被后续覆盖。
- 正确顺序：
additionalData: `@use "element-plus/" with ($colors: (primary: $primary-color)); @use "@/styles/variables.scss" as *;`</li> <li>错误顺序：<code>@use "@/styles/variables.scss" as *; @use "element-plus/" with (...)`
→$primary-color此时还未生效，传给Element Plus的是undefined - 所有
@use语句之间用分号分隔，不能换行也不能漏分号 - 如果变量来自JS运行时（如暗色模式切换），SCSS做不到，得改用CSS变量+JS控制
:root，SCSS只负责编译期静态值
最容易被忽略的是：SCSS变量只存在于编译期，它不会变成JS可读的值，也不会响应运行时变化。如果你在JS里试图读取$primary-color，注定失败——那得靠.module.scss配合:export导出，而且只能导出字符串字面量，不能导出计算结果。
