additionaldata不生效主要因注入链破坏：末尾缺分号、路径未正确配置alias、variables.scss含css规则；必须用@use "@/styles/variables.scss" as *;且确保sass已安装、alias定义早于css配置、路径带引号和分号。
为什么additionalData不生效？先查这三处
90% 的配置失败不是因为 Vite 版本或插件问题，而是注入链被破坏了。变量报 Undefined variable 时，优先检查：
-
additionalData字符串末尾漏了分号（;）——SCSS 解析器会把下一行内容拼进来，直接编译失败 - 路径用了相对路径（如
"./src/styles/variables.scss"），但resolve.alias没配或配在css配置之后，导致路径解析失败 -
variables.scss文件里写了body { ... }这类 CSS 规则——会被重复注入到每个组件样式块中，不仅污染输出，还可能触发权重冲突
additionalData 必须用 @use 而不是 @import
Dart Sass（Vite 默认使用的编译器）已弃用 @import，且 @use + as * 是唯一能真正“平铺”变量到全局命名空间的方式。写错会静默失效：
- ✅ 正确：
@use "@/styles/variables.scss" as *;—— 变量如$primary-color可直接用 - ❌ 错误：
@import "@/styles/variables.scss";—— 控制台报弃用警告，未来版本将彻底移除 - ❌ 更错：
@use "@/styles/variables.scss";（缺as *）—— 变量必须写成variables.$primary-color，失去“全局”意义
路径、别名和依赖缺一不可
配置本身只是一行字符串，但它依赖三个底层支撑点同时成立：
-
sass必须安装为 devDependency：pnpm add -D sass（不是node-sass，已废弃） -
vite.config.ts中resolve.alias要早于css.preprocessorOptions定义，且确保@指向src根目录 -
additionalData的路径必须带引号、以@/开头、结尾带分号——三者缺一都会让注入逻辑中断
变量文件里只能放“非输出型”内容
variables.scss 不是普通样式文件，它只负责定义，不负责渲染：
- ✅ 允许：
$color-primary: #409eff;、@mixin flex-center { ... }、@function px2rem($px) { ... } - ❌ 禁止：
body { margin: 0; }、.reset { padding: 0; }—— 这些规则会在每个<style lang="scss"></style>中重复出现，造成样式冗余和权重混乱 - ⚠️ 注意：如果项目同时用
less和scss，preprocessorOptions下要分别配less和scss字段，不能只写一个
variables.scss 里混入了任何一行实际输出的 CSS 规则——它不会报错，但会让所有组件样式多出一段重复代码，调试时根本看不出来源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
