additionaldata 是注入 sass 全局变量最稳妥的方式，因其在 vite 编译前统一拼接 scss 代码，确保所有样式块（含 scoped）都能访问变量且不污染作用域。
为什么 additionalData 是注入 Sass 全局变量最稳妥的方式
直接在 vite.config.ts 里用 css.preprocessorOptions.sass.additionalData 注入 @use 或 @import，比手动在每个 .vue 文件顶部写 <style lang="scss"></style> 更可靠——它能确保所有组件、所有 <style></style> 块（包括 scoped）都提前加载变量和函数，且不污染组件自身作用域。Vite 的 CSS 预处理器管道会在解析前统一拼接这段内容，所以不会出现“变量未定义”报错。
注意：这不是“全局注入 JS 变量”，而是让 Sass 编译器在每次编译前自动前置一段 SCSS 代码，本质是语法层面的预处理。
additionalData 中该写 @use 还是 @import
Vite 5+ 默认使用 Dart Sass，@use 是推荐方式，但必须注意路径和命名空间问题；@import 虽已废弃但仍可用，兼容性更好但易引发变量覆盖。
- 用
@use "@/styles/variables.scss" as *;可无前缀访问变量（如$primary-color），但要求variables.scss不含@forward冲突，且所有被@use的文件必须是纯模块（不能有顶层样式输出） - 用
@import "@/styles/variables.scss";最简单，但若多个文件重复@import同一文件，Sass 会静默去重——不过一旦某处误写成@import "xxx" as x;，就会报Invalid CSS after "...": expected 1 selector or at-rule, was "as" - 路径必须是相对 Vite 项目根目录的，不能用
~别名（Vite 不解析 SCSS 中的别名），建议统一用@/别名并确保resolve.alias已配好
如何避免 additionalData 引发的常见编译错误
错误往往不是配置本身出错，而是注入内容与目标文件的语法上下文冲突。例如在 scoped 样式中注入 @use 后，Sass 会尝试把整个块当作模块作用域处理，导致 :deep() 等 Vue 特殊选择器失效。
- 始终用换行结尾：
additionalData字符串末尾加\n，否则最后一行可能和组件内样式连成一句，触发Invalid CSS - 不要注入
@mixin或@function定义后直接调用——它们必须在同一个编译单元内定义再使用，而additionalData是前置拼接，调用语句在组件样式里，属于不同单元，会报Undefined mixin - 如果用
@use，确保被引入的 SCSS 文件里没有@debug、@warn，否则构建时会吐一堆日志甚至中断（开发时尤其明显） - 当项目启用
css.modules时，additionalData注入的内容仍生效，但变量仅作用于模块内，不影响全局 CSS 文件
性能与维护建议：别把所有东西都塞进 additionalData
它适合放真正全局、高频使用的颜色、断点、z-index 层级等常量；但像组件专属的 @mixin、主题切换逻辑、CSS 自定义属性映射，应该拆到独立 SCSS 模块里，按需 @use。否则每次修改一个变量，Vite 都会全量重编译所有样式——因为 additionalData 被视为所有样式文件的依赖。
- 可分层管理：基础变量（
variables.scss）用additionalData注入；工具类（mixins.scss、functions.scss）保留在组件内按需引入 - 若团队多人协作，建议在
additionalData开头加注释说明用途，例如// @use "@/styles/variables.scss" as *; // DO NOT REMOVE: required for $spacing-xs etc. - 检查是否真需要“全局”：Vue 3 的
<style scoped></style>支持:deep(.foo) { @apply bg-primary; }，配合 Tailwind 或 UnoCSS 时，Sass 变量反而成了冗余层
真正麻烦的是跨框架复用——比如把同一套变量同时喂给 Vue 和 Solid 组件，这时 additionalData 就只对 Vue 生效，得另配 Rollup 插件或统一导出为 CSS 自定义属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
