additionalData 配置使 SCSS 变量全局可用，需用 @use "@/styles/variables.scss" as *; 并确保路径经 Vite 别名解析；相对路径、缺分号、混用 @import 会导致失效；JS 中读取变量须借助 .module.scss + :export。
直接生效，无需每个 .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 * - Element Plus 等 UI 库的变量覆盖场景下，
@use 'element-plus/...' with ()必须出现在additionalData最前面，否则默认值已锁定
@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 一视同仁 - 如果用了
@forward或@use的模块化写法（比如按功能拆_colors.scss、_mixins.scss），必须在variables.scss里统一@use并as *，不能只靠additionalData注入一个空壳文件
JS 中想读取 SCSS 变量？得另走 .module.scss + :export
additionalData 只影响样式编译，对 JS 完全不可见。如果要在 Vue 组件的 setup() 或 TS 逻辑里用 $primary-color，必须另建一个 variables.module.scss：
// src/styles/variables.module.scss
:export {
primaryColor: #409eff;
basePadding: 15px;
}
然后在 TS 中导入：
import variables from '@/styles/variables.module.scss' console.log(variables.primaryColor) // '#409eff'
这是唯一可靠方式 —— 别试图用 document.documentElement.style.getPropertyValue 去读 CSS 自定义属性，那属于运行时主题切换范畴，和构建期的 SCSS 变量无关。
