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