css.preprocessoroptions.scss.additionaldata是当前最可靠方式，必须配在scss字段下（非sass），用@use "@/styles/variables.scss" as *;语法，路径需经resolve.alias正确定义，且变量文件仅含变量/mixin/function。
css.preprocessorOptions.scss.additionalData 是当前最可靠的方式，其他配置项（比如 sass 下的同名字段、prependData、data）在 Vite 或新版 Vue CLI 中要么已废弃，要么只对特定 loader 版本有效，容易白配。
为什么 css.preprocessorOptions.sass 配置不生效？
Vite 把 .sass（缩进语法）和 .scss（花括号语法）当作两个独立预处理器。即使你项目里全是 .scss 文件，也必须把全局注入逻辑写在 scss 字段下，而不是 sass 字段——配错位置会导致编译时变量未定义或报 File to import not found 错误。
-
css.preprocessorOptions.sass→ 只影响.sass文件（极少用） -
css.preprocessorOptions.scss→ 影响所有.scss和<style lang="scss"></style>块（绝大多数项目该配这里） - Vue CLI 5+ 已弃用
data，Vite 从不识别它；prependData是 Webpack + sass-loader v10 以前的写法，v8+ 后已失效
如何用 additionalData 注入全局变量（推荐）
它会在每个 .scss 文件编译前，把指定内容拼接到顶部，变量自然全局可用，无需手动 @import。关键点：
- 路径必须用
@/别名（如@/styles/_variables.scss），不能用相对路径（../styles/_variables.scss）——Vite 解析别名更稳定 - 确保
vite.config.js中已正确定义了resolve.alias，否则@/会解析失败 - 用
@use "@/styles/_variables.scss" as *;而非@import，这是 Dart Sass 推荐方式，避免命名污染和循环依赖 - 如果
_variables.scss内部还@use了_mixins.scss或_functions.scss，请确保它们都在同一目录且路径正确
示例配置：
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/_variables.scss" as *;'
}
}
}
})
includePaths 能替代 additionalData 吗？
不能真正替代，只能辅助。它只告诉 Sass 编译器“去哪找文件”，不自动引入内容。比如配置了 includePaths: [path.resolve(__dirname, 'src/styles')]，你仍得在每个 .scss 文件开头写 @use "variables" as *;，否则变量不可用。
- 适合已有大量手动导入的老项目，不想改源码时过渡使用
- 和
additionalData混用可能触发重复定义警告（比如变量被注入两次） - 无法解决“忘记导入就报错”的问题，变量不是真正全局的
真正容易被忽略的是：Vite 的 additionalData 对 <style scoped></style> 和 <style module></style> 同样生效，但如果你在变量文件里用了 CSS 自定义属性（--color-primary），它们不会自动透出到运行时 JS 中——那是另一层机制，和 Sass 编译无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
