additionaldata 配置可使 scss 变量全局可用，但路径错误、分号遗漏、@use 与 @import 混用是 90% 失效主因；必须用 @use "@/styles/variables.scss" as *; 并确保别名已配置、文件无 css 规则、末尾带分号。
直接在 vite.config.ts 里配 css.preprocessorOptions.scss.additionalData 就能生效，但路径写错、分号遗漏、@use 和 @import 混用，是 90% 的失败原因。
为什么 additionalData 不生效？常见错误现象
变量在组件里报 Undefined variable，或混合器提示 Undefined mixin；明明 variables.scss 文件存在，却像没加载一样。根本不是 Vite 版本或插件问题，而是注入逻辑被破坏了：
-
additionalData字符串末尾漏了分号（;），SCSS 解析器会把下一行内容拼进来，直接语法报错 - 用了
@use "@/styles/variables.scss" as *;，但文件里含@import或@forward，而目标文件又没声明@forward所需的模块，导致符号未暴露 - 路径用了相对路径（如
"./src/styles/variables.scss"），但 Vite 别名（@）未配置或配置晚于css配置块，路径解析失败 - 在
additionalData里同时@import多个文件，中间没加分号，变成非法语句
@use vs @import：该选哪个？
Vue3 + Vite 项目默认用 Dart Sass（sass 包），它推荐 @use，但必须配合 as * 才能“平铺”导入所有变量和混合器。而 @import 是旧语法，兼容性好但已被弃用：
- 用
@use "@/styles/variables.scss" as *;→ 变量/混合器可直接用，无命名冲突风险，但要求variables.scss内部不依赖其他@use未导出的内容 - 用
@import "@/styles/variables.scss";→ 更宽松，支持老式写法（比如含@import "normalize";），但未来会被移除，且容易因重复@import导致样式重复编译 - 别混用：比如
additionalData里写@use，但variables.scss里又用@import引别的文件，可能触发 “module not found” 错误
配置示例与路径注意事项
确保 @ 别名已定义，且 additionalData 在 css.preprocessorOptions.scss 下正确嵌套。路径必须带引号、末尾带分号：
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
}
-
variables.scss文件里只放$xxx、@mixin xxx、@function xxx，不要写任何 CSS 规则（如body { ... }），否则会在每个组件里重复输出 - 如果项目用的是
pnpm或yarn pnp，确认sass已安装为devDependencies（pnpm add -D sass），否则 Vite 找不到编译器 - Vite 4.3+ 支持函数式
additionalData，可用于跳过 node_modules 中的文件（避免对第三方组件样式重复注入）：additionalData: (content, { filename }) => { if (filename.includes('node_modules')) return content; return `@use "@/styles/variables.scss" as *;` + content; }
为什么在 main.ts 里 import './styles/index.scss' 不行？
那只是把全局 CSS 规则注入到 JS 运行时，对组件内 <style lang="scss"></style> 块完全无效——SCSS 变量作用域是编译期的，不是运行时的。Vite 的 additionalData 是在 SCSS 编译前统一注入，相当于每个 .vue 文件开头都自动加了一行 @use，这才是真正“全局”的方式。漏掉这一步，就等于没配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
