答案是additionalData不生效主因是SCSS语法破坏：末尾漏分号、路径未用@别名、variables.scss含CSS规则、@use与@import混用；必须用@use "@/styles/variables.scss" as *;，确保别名已配、文件纯变量/混合器、末尾带分号。
不能直接注入 CSS 变量（--xxx），Sass 变量（$xxx）和 CSS 自定义属性是两套系统；全局注入的是 Sass 编译期变量，不是运行时 CSS 变量。
为什么 additionalData 不生效？
最常见原因是字符串拼接破坏了 SCSS 语法结构：
-
additionalData字符串末尾漏掉分号（;），导致后续组件里的 SCSS 内容被错误拼接到@use行末，直接触发 Sass 解析失败 - 路径用了相对路径（如
"./src/styles/variables.scss"），但 Vite 的@别名还没加载或配置位置不对（必须在css.preprocessorOptions.scss块内） -
variables.scss文件里混写了 CSS 规则（比如body { color: red; }），会被每个组件重复注入，且可能干扰变量暴露 - 同时用了
@use和@import：例如additionalData里写@use，但variables.scss内部又用@import "mixins"，而mixins.scss没配@forward，符号根本没导出
@use vs @import：该选哪个？
Vite + Vue 3 默认用 Dart Sass，@use 是推荐方式，但必须配合 as * 才能平铺使用：
-
@use "@/styles/variables.scss" as *;→ 变量（$color-primary）、混合器（@mixin center）可直接用，无命名冲突，但要求variables.scss内部所有依赖都通过@forward显式暴露 -
@import "@/styles/variables.scss";→ 兼容老写法（比如含@import "normalize"），但已被 Sass 官方弃用，重复@import可能导致样式重复编译 - 严禁混用：
additionalData用@use，但variables.scss里再@import其他文件，极易触发Module not found
vite.config.ts 配置要点
路径、引号、分号、别名缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 确保
sass已安装为 devDependencies：pnpm add -D sass（Vite 不自带编译器） -
@别名必须已正确定义（通常在resolve.alias中），且css.preprocessorOptions.scss.additionalData配置块不能写在别名配置之前 -
additionalData值必须是字符串，带双引号包裹路径，结尾有分号：`@use "@/styles/variables.scss" as *;` -
variables.scss文件只能含$xxx、@mixin xxx、@function xxx，不能有任何 CSS 规则（如.btn {}）
容易被忽略的细节
真正卡住人的往往不是配置本身，而是隐性依赖链：
比如你写了 @use "@/styles/functions.scss" as *;，而 functions.scss 里又 @use "sass:math" —— 这没问题；但如果你在 functions.scss 里还 @use "@/styles/mixins.scss"，却没在 mixins.scss 顶部加 @forward "./utils";，那么 utils 里的函数就无法被 functions.scss 导出，最终在组件里调用就会报 Undefined function。
