关键在css.preprocessorOptions.scss.additionalData配置@use "@/styles/variables.scss" as *;，需确保别名已定义、路径正确、末尾带分号、variables.scss仅含变量/mixin/function且无CSS规则。
直接生效，不用每个 .scss 文件写 @import 或 @use —— 关键是 css.preprocessorOptions.scss.additionalData 配置项，但路径、语法、注入方式稍有不慎就会失效或报错。
为什么 additionalData 有时不生效？
常见现象是变量在组件里用不了，控制台报 Undefined variable，或者编译不报错但颜色/间距没变。根本原因不是配置漏了，而是：
-
additionalData是字符串拼接进每个 SCSS 文件头部的，所以路径必须能被 Node.js 的require.resolve或 Vite 别名机制正确解析；相对路径（如"../styles/vars.scss"）极易因文件位置不同而失败 - 用
@import时结尾没加分号（@import "@/styles/variables.scss"❌），SCSS 解析器会吞掉后续所有内容，静默失败 - 混用
@import和@use：Vite 的additionalData不支持跨作用域共享@use命名空间，除非显式加as *
@use "@/styles/variables.scss" as *; 是当前最稳写法
比起 @import，@use 更符合 SCSS 5.0+ 规范，且 as * 能把变量、mixin、function 全部平铺到全局作用域，组件内可直接用 $primary-color 或 @include flex-center：
- 确保
variables.scss只含「非输出型」内容：变量（$xxx）、mixin（@mixin xxx）、function（@function xxx），禁止写body { }这类实际生成 CSS 的规则 - 路径必须走 Vite 别名（如
@/styles/variables.scss），且该别名已在vite.config.ts的resolve.alias中正确定义 - 字符串中换行用反引号（
`），分号不能少：additionalData: `@use "@/styles/variables.scss" as *;` - 若需注入多个文件（比如同时覆盖 Element Plus 变量），用分号连写：
`@use "@/styles/element-variables.scss" as *; @use "@/styles/variables.scss" as *;`
Vue 单文件组件里怎么用？
不需要任何 import，只要配置生效，<style lang="scss"> 块内可直接访问所有变量和 mixin：
立即学习“前端免费学习笔记（深入）”；
<style lang="scss">
.example {
color: $primary-color;
padding: $base-padding;
@include flex-center;
}
</style>
注意两点：
- 不要在
<style scoped>里误以为需要额外处理 ——additionalData对scoped和非scoped一视同仁 - Element Plus 等 UI 库的变量覆盖场景下，
@use 'element-plus/' with ()必须出现在additionalData最前面，否则默认值已锁定
最容易被忽略的是：变量文件里写了实际 CSS 规则（比如重置样式），或者别名没配对、路径没走 @/ 开头 —— 这些都会导致 silent fail，而不是报错提示。
