additionaldata 不生效的主因是注入链被破坏：末尾缺分号、路径解析失败或 variables.scss 中混入实际 css 规则；必须同时满足 sass 安装、resolve.alias 正确配置及 additionaldata 字符串规范。
能直接在所有 <style lang="scss"></style> 里用 $primary-color，但必须配对 additionalData + @use "@/styles/variables.scss" as *;，缺一不可。
为什么 additionalData 不生效？先查这三处
90% 的失败不是 Vite 版本问题，而是注入链被破坏：
-
additionalData字符串末尾漏了分号（;）——SCSS 解析器会把组件里第一行样式拼进来，报Invalid CSS after "..." - 路径用了相对路径（如
"../styles/variables.scss"），但resolve.alias没配或配在css.preprocessorOptions之后，导致路径解析失败 -
variables.scss里写了body { margin: 0; }这类实际输出 CSS 的规则——它不会报错，但会让每个组件样式块都重复注入这段，调试时根本找不到来源
@use "@/styles/variables.scss" as *; 是唯一可靠写法
@import 已被 Dart Sass 弃用，@use 是当前标准，但必须带 as * 才能把变量、mixin、function 平铺到全局作用域：
- ✅ 正确：
@use "@/styles/variables.scss" as *;→ 组件中可直接写color: $primary-color; - ❌ 错误：
@use "@/styles/variables.scss";（缺as *）→ 必须写成variables.$primary-color，失去“全局”意义 - ❌ 更错：
@import "@/styles/variables.scss";→ 控制台警告，未来版本将彻底移除，且不支持as语法
依赖、别名、路径三者必须同时成立
配置只是一行字符串，但它背后依赖三个底层支撑点：
-
sass必须安装为devDependency：pnpm add -D sass（不是node-sass，已废弃） -
vite.config.ts中resolve.alias要早于css.preprocessorOptions定义，且确保@指向src根目录 -
additionalData的值必须是反引号包裹的字符串，路径带引号、以@/开头、结尾带分号：additionalData: `@use "@/styles/variables.scss" as *;`
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
