css.preprocessorOptions.scss.additionalData 是 Vite 中使 Sass 变量全局可用的必需配置，通过在每个 SCSS 文件开头自动注入 @use "@/styles/variables.scss" as *; 实现；变量文件须纯含 $var、@mixin、@function，禁含 CSS 规则，路径需别名且末尾加分号。
css.preprocessorOptions.scss.additionalData 是 Vite 中实现 Sass 变量全局可用的唯一可靠方式。它不是“可选优化”，而是必须配置的环节；不配，$color-primary 这类变量在任何 .vue 单文件组件的 里都会报错 Undefined variable。
为什么不能在 main.ts 里 import variables.scss？
因为 main.ts 是 JS 执行上下文，而 Sass 变量只在编译期生效、不输出到运行时。你在 JS 里 import './styles/variables.scss'，Vite 会把它当普通 CSS 加载（触发样式注入），但不会把里面的 $xxx 提供给其他 SCSS 文件使用 —— 它们压根没被“可见地导入”。
- SCSS 变量 / 混合器 / 函数 必须通过
@import或@use显式引入才能作用于当前作用域 -
additionalData的本质，就是在每个.scss文件内容开头自动拼上一行@import或@use - 直接
import到 JS 是无效路径，别试
用 @import 还是 @use？参数写法有区别
两者都行，但行为不同：@import 是旧语法，变量直接挂到全局命名空间；@use 更现代，需加 as * 才能解构出所有变量（否则要写 variables.$primary-color）。
- 推荐用
@use "@/styles/variables.scss" as *;：语义清晰，且避免@import的循环依赖风险 - 路径必须以
@/开头（前提是 vite.config.js 里已配了resolve.alias），不能写相对路径如../styles/variables.scss - 末尾必须加分号
;，否则整个 SCSS 编译失败，报错信息可能误导成“unexpected token” - 如果 variables.scss 里用了
@use引入其他模块（比如@use 'sass:math'），确保它们也在同一作用域下可用
常见错误：路径正确但变量仍报 undefined
最常踩的坑不是语法，而是文件内容本身违规 —— variables.scss 里混进了“会输出 CSS”的代码。
- ❌ 不要写
body { margin: 0; }、.btn { color: $primary; }这类规则：它们会被重复注入 N 次（每个组件都算一次） - ✅ 只保留
$xxx变量、@mixin xxx、@function xxx、@forward、@use - 如果需要全局基础样式（比如重置、字体定义），单独建
base.scss，并在main.ts或App.vue的里显式@import - 检查
variables.scss是否有中文字符、BOM 头、或未闭合的注释 —— 这些会导致additionalData注入后整体失效
在 JS/TS 中读取 Sass 变量？得换路子
想在 setup() 或 composable 里拿到 $primary-color 的值？additionalData 帮不上忙。Sass 变量编译后就消失了，JS 拿不到。
- 方案一：改用 CSS 自定义属性（
:root { --primary-color: #9d60ff; }），JS 通过getComputedStyle读取 - 方案二：维护一份
theme.ts，和variables.scss手动同步，保证双端一致 - 方案三：用
variables.module.scss+export语法（如$primary-color: #9d60ff; :export { primaryColor: $primary-color; }），再import进 TS —— 但注意：这仅适用于简单字符串值，不支持嵌套、计算或混合器
真正容易被忽略的是：一旦你用 additionalData 全局注入，所有 .scss 文件（包括 node_modules 里第三方库的）都会隐式带上那行 @use。如果第三方库内部也定义同名变量，可能冲突。所以 variables.scss 的命名尽量带前缀，比如 $myapp-primary-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
