因为additionalData由Sass/Less原生编译器直接解析，不经过Vite的resolve.alias处理，@/别名不被识别，必须用相对路径（如"./src/styles/variables.scss"）或path.resolve()生成的绝对路径。
为什么 additionalData 里不能用 @/ 别名
因为 Vite 的 CSS 预处理器（如 Sass/Less）在解析 additionalData 字符串时，不经过 resolve.alias 处理——它直接交给 sass 或 less 原生编译器执行。而 Dart Sass 和 Less CLI 默认只认相对路径或绝对路径，@/styles/vars.scss 会被当成字面量路径，最终报 File to import not found。
scss.additionalData 必须用相对路径 + @use
推荐写法是用 @use 显式引入变量文件，并加 as * 暴露所有成员：
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "./src/styles/variables.scss" as *;'
}
}
}
- 路径必须以
./开头，且相对于vite.config.js所在位置 - 不要用
_variables.scss这类下划线前缀（Sass 规则里下划线文件是“私有”的，@use不会自动暴露其内容） - 如果变量文件里用了
@forward或@use引入其他文件，确保它们也都用相对路径
less.modifyVars 和 less.additionalData 的区别
Less 不支持 additionalData 字符串注入全局 @mixin，只能用 modifyVars 注入顶层变量（如颜色、字号），例如：
ImageMagick 批处理处理器
下载
使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。
css: {
preprocessorOptions: {
less: {
modifyVars: {
'@primary-color': '#1890ff',
'@font-size-base': '14px'
}
}
}
}
-
modifyVars只影响当前编译上下文，子@import文件里的变量不会继承 - 想复用
.clearfix()这类 mixin，得额外装less-plugin-import并配置插件，否则无效 - 如果同时用了
modifyVars和additionalData，后者会被忽略——Less 只认前者
多个预处理器共存时，全局引入要分别配
项目里既有 .scss 又有 .less，就得两套配置都写全：
立即学习“前端免费学习笔记（深入）”；
-
scss.additionalData控制 SCSS 全局变量/mixin -
less.modifyVars控制 Less 顶层变量 - 两个编译器包都得装：
pnpm add -D sass less，缺一个，对应后缀的文件就直接报Cannot find module 'xxx' - SCSS 的
@use是同步解析的，变量能跨文件生效；Less 的@import默认异步，嵌套深了还可能栈溢出
最容易被忽略的是：你写了 variables.scss，但没在任何地方 @use 或 @import 它，Vite 构建时根本不会检查它有没有语法错误——它压根不参与编译。
