additionalData不生效的根本原因是SCSS语法被破坏：末尾漏分号导致拼接错误、相对路径未解析、variables.scss含CSS规则、@use与@import混用，或未正确配置sass、别名、as *及纯模块要求。
不能“全局注入 CSS”，只能全局注入 SCSS 编译期变量（$xxx）或混合器（@mixin）；CSS 自定义属性（--xxx）必须靠 JS 或 :root 注入，和 SCSS 无关。
为什么 additionalData 不生效？
90% 的失败不是配置位置错，而是 SCSS 语法被破坏：
-
additionalData字符串末尾漏了分号（;），导致后续组件里的 SCSS 被拼到@use行末，直接报SyntaxError: expected ";" - 路径用了相对路径（如
"./src/styles/variables.scss"），但 Vite 的@别名还没加载，或配置顺序错了——css.preprocessorOptions.scss.additionalData必须写在resolve.alias之后 -
variables.scss里写了实际 CSS 规则（比如.btn { color: red; }），会被每个组件重复注入，且干扰变量导出 -
additionalData用@use，但variables.scss内部又用@import引其他文件，而那些文件没配@forward，符号根本没暴露
@use 和 @import 怎么选？
Vue 3 + Vite 默认用 Dart Sass，@use 是唯一推荐方式，但必须配合 as * 才能平铺使用：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
@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（不是sass-loader）：pnpm add -D sass -
resolve.alias中定义了@别名，且位置在css配置块之前 -
additionalData是字符串，路径带双引号，结尾带分号：`@use "@/styles/variables.scss" as *;` -
variables.scss文件只含$xxx、@mixin xxx、@function xxx，不能有任何 CSS 规则（如body { }）
真正卡住人的，往往不是 additionalData 写错，而是 variables.scss 里悄悄 @use 了另一个文件，而那个文件又依赖未声明的模块（比如 @use "sass:math" 没写全），编译器不报错但变量就是不导出。
