必须用绝对路径配置additionaldata，@import不支持@/别名；需path.resolve拼接路径、末尾加分号；变量文件应仅含变量，混入样式会污染；modifyvars仅适用纯变量，mixin须用@import；less和@types/node依赖不可少；变量文件需显式引用防tree-shake；作用域非全局，应统一入口导入。
css.preprocessorOptions.less.additionalData 必须用绝对路径
配置 additionalData 时，@import 的路径不能依赖 @/ 别名——CSS 预处理器层不解析 Vite 的 resolve.alias。哪怕你在 vite.config.ts 里写了 alias: { '@': '/src' }，@import "@/styles/vars.less" 依然会报错“file not found”。
正确做法是用 path.resolve() 拼出绝对路径：
<pre class="brush:php;toolbar:false;">import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, 'src/assets/styles/variables.less')}";`
}
}
}
})
- 路径必须相对于
vite.config.ts 所在目录（通常是项目根目录） - 末尾的分号
;不可省略，否则 Less 编译器直接报错ParseError: missing semicolon - 如果变量文件里混写了样式规则（比如
.clearfix { ... }），它会在每个.less文件开头重复注入，造成样式污染
modifyVars 只适用于纯变量，不支持 @mixin 或嵌套
如果你的全局文件只定义颜色、尺寸等简单变量（如 @primary-color: #1890ff;），可以用 modifyVars，它更轻量、不走 @import 流程：
<pre class="brush:php;toolbar:false;">less: {
modifyVars: {
'@primary-color': '#1890ff',
'@border-radius-base': '4px'
},
javascriptEnabled: true
}
modifyVars 对 <code>@mixin、.class规则、@import语句完全无效- 若需复用
.clearfix()这类 mixin，必须用additionalData + @import，且确保被 import 的文件本身不含实际样式 -
javascriptEnabled: true是必需项，否则 Less 无法解析带 JS 表达式的变量（如@color: color(~"rgb(255, 0, 0)");）
依赖和类型声明缺一不可
Vite 5+ 完全弃用 node-sass 和旧版 less-loader，只认官方 less 包。装错或漏装会导致配置静默失效——没有错误提示，变量就是不生效。
- 执行
pnpm add -D less（或yarn add -D less） - TypeScript 项目中若在
vite.config.ts里用import path from 'path'，必须装@types/node，否则 TS 报错Cannot find module 'path' - 变量文件（如
variables.less）必须被至少一个.less文件显式引用过（哪怕只是空@import），否则构建时可能被 tree-shake 掉，且不报错
Less 全局变量不会自动继承到子文件作用域
很多人以为在 additionalData 里 @import "base.less" 后，所有子 @import 的文件都能直接用 @primary-color ——其实不是。Less 的作用域是“导入链局部”的：只有直接受 additionalData 注入的顶层文件能访问这些变量；它再 @import 的子文件，若没再次声明 @import，就拿不到。
- 解决方案：把所有变量、mixin、函数都收进一个入口文件（如
index.less），然后在additionalData中只导入它 - 避免在变量文件里写
@import "./mixins.less";，改用@import (reference) "./mixins.less";（reference模式不输出样式，只提供作用域） - 如果用了
less-plugin-import等插件，要确认它兼容当前less版本（2026 年主流是 Less 4.2+）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
