必须配置css.preprocessoroptions.scss.additionaldata，否则变量报undefined variable；90%失效因末尾缺分号、alias未配或配晚、variables.scss含css规则；须用@use "@/styles/variables.scss" as *;，且sass为devdep、alias早于css配置、路径带引号和分号。
必须配置 css.preprocessorOptions.scss.additionalData，否则变量在任何 .vue 或 .scss 文件里都会报 Undefined variable。
为什么 additionalData 不生效？先查这三处
90% 的失败不是 Vite 版本问题，而是注入链断了：
-
additionalData字符串末尾漏了分号（;）——SCSS 解析器会把组件里第一行样式拼进来，直接编译失败 - 路径用了相对写法（如
"../styles/variables.scss"），但resolve.alias没配或配晚了，导致@/无法解析 -
variables.scss里写了body { margin: 0; }这类实际输出 CSS 的规则——它会被重复注入到每个<style lang="scss"></style>块开头，不报错但造成样式冗余、权重异常、覆盖失效
additionalData 里该写 @use 还是 @import？
Vite 5+ 默认用 Dart Sass，@use 是唯一推荐方式：
- ✅ 正确：
@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 5+ 完全不兼容） -
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; }——这些规则会在每个组件样式中重复出现，调试时根本看不出来源 - ⚠️ 如果需要全局基础样式（重置、字体等），单独建
base.scss，并在main.ts或App.vue的<style></style>里显式@import
真正容易被忽略的，是 variables.scss 里混入了任何一行实际输出的 CSS 规则——它不会报错，但会让所有组件样式多出一段重复代码，而且你很难定位来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
