additionaldata 必须用 @use "@/styles/variables.scss" as *; 且 variables.scss 中不能含实际 css 规则，否则变量未定义、样式冗余、权重错乱。
不能直接“注入CSS”，只能注入SCSS变量、mixin、function——真正想全局生效的样式规则（如重置、字体定义），必须走其他路径。 配置 additionalData 是为了编译期共享作用域，不是往页面塞CSS；写进 variables.scss 的 body { margin: 0 } 会被重复注入到每个组件样式块里，导致权重错乱、样式冗余，且不报错。
为什么 additionalData 注入后变量仍报 Undefined variable
这不是配置漏了，而是注入链断在了三个具体环节：
-
additionalData字符串末尾缺分号（;）——SCSS 解析器会吞掉后续所有内容，静默失败或报Invalid CSS after "variables.scss" - 路径用了相对写法（如
"./src/styles/variables.scss"），但vite.config.ts中resolve.alias没配，或配得晚于css.preprocessorOptions，导致路径根本解析不了 -
variables.scss文件里混进了实际输出 CSS 的规则（比如.reset { padding: 0 }），Vite 不拦，但编译时会把它拼进每个组件的<style></style>块开头，污染输出且掩盖真实问题
additionalData 必须用 @use ... as *，不能用 @import
Dart Sass（Vite 默认编译器）已弃用 @import，未来版本将彻底移除。写错会静默失效：
- ✅ 正确：
@use "@/styles/variables.scss" as *;—— 变量$primary-color、mixin@include flex-center全部平铺可用 - ❌ 错误：
@import "@/styles/variables.scss";—— 控制台警告，变量不可用 - ❌ 更错：
@use "@/styles/variables.scss";（缺as *）—— 变量必须写成variables.$primary-color，失去“全局”意义
依赖、别名、路径三者必须同时成立
配置本身只是一行字符串，但它依赖底层三个支撑点：
-
sass必须装为开发依赖：pnpm add -D sass（node-sass已废弃，Vite 5+ 完全不兼容） -
vite.config.ts中resolve.alias要早于css.preprocessorOptions定义，且确保@指向src根目录 -
additionalData的值必须是反引号包裹的字符串，路径以@/开头，结尾带分号：additionalData: `@use "@/styles/variables.scss" as *;`
真正最容易被忽略的，是 variables.scss 里混入了任何一行实际输出的 CSS 规则——它不会报错，但会让所有组件样式多出一段重复代码，调试时根本看不出来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
