怎样在Vite中配置CSS预处理器的全局引入路径？-css教程-PHP中文网

因为additionalData由Sass/Less原生编译器直接解析，不经过Vite的resolve.alias处理，@/别名不被识别，必须用相对路径（如"./src/styles/variables.scss"）或path.resolve()生成的绝对路径。

怎样在vite中配置css预处理器的全局引入路径？

为什么 `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'
      }
    }
  }
}