vite 中 less 全局变量必须通过 css.preprocessoroptions.less.additionaldata 注入，因 modifyvars 仅支持纯变量覆盖且不解析 @/ 别名；additionaldata 可加载变量、mixin 和函数，需用 path.resolve 确保路径正确、末尾带分号，并避免样式重复输出。
直接说结论：Vite 中 Less 全局变量必须走 css.preprocessorOptions.less.additionalData 注入，modifyVars 仅适用于纯变量（不含 @mixin），且路径必须是相对于 vite.config.js 的绝对路径或可靠相对路径——别信 @/ 别名在 Less 编译阶段能解析。
为什么 additionalData 是唯一通用方案
Less 不支持 Dart Sass 那种 @use 作用域隔离，modifyVars 只能覆盖顶层变量（如 @primary-color），一旦变量文件里定义了 .clearfix() { ... } 这类 mixin，modifyVars 就完全失效。而 additionalData 实质是在每个 .less 文件头部自动拼接一段代码，等价于手动写 @import "./src/styles/variables.less";，所以它能加载变量、mixin、函数，只要源文件本身合法。
-
additionalData值必须是字符串，末尾必须带分号;，否则 Less 解析器直接报错 - 不能写
@import "@/styles/variables.less";—— CSS 层不走 Vite 的 alias 解析，@/在这里就是字面量，不是路径别名 - 若变量文件路径含空格或中文，用
path.resolve()转成绝对路径最稳
additionalData 怎么写才不报错
常见错误是引号嵌套混乱、路径拼错、漏分号。正确写法示例：
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, 'src/assets/styles/variables.less')}";`
}
}
}
- 外层用反引号
`，内层用双引号包裹路径，避免单引号和变量插值冲突 -
path.resolve(__dirname, ...)确保路径从vite.config.js所在目录出发，不依赖运行时工作目录 - 如果不用
path模块，就老实用相对路径：additionalData: '@import "./src/assets/styles/variables.less";'（注意开头的.） - 变量文件
variables.less里只放@color-primary: #1890ff;这类声明，别写body { margin: 0; }，否则每编译一个 .less 文件都会重复输出这些样式
为什么装了 less 还报 Cannot find module 'less'
Vite 5+ 完全弃用 node-sass，Less 同理：必须装 less 包，不是 less-loader（那是 Webpack 用的）。而且 Vite 不会自动 fallback，缺包就直接中断构建。
- 执行
pnpm add -D less或npm install -D less，确认node_modules/less存在 - 检查
package.json里devDependencies确实有"less": "^4.2.0"（当前稳定版） - 如果用 TypeScript，
import path from 'path'报错，补装@types/node，否则path.resolve类型检查过不去 - 重启开发服务器：Vite 的 CSS 缓存很顽固，改了配置不重启，
additionalData会被旧缓存锁死
最容易被忽略的点是：变量文件没被任何 .less 文件显式引用过，Vite 构建时可能直接跳过它，也不报错——结果你改了半天配置，变量就是不生效。解决办法很简单：随便找一个 .less 文件，加一行 @import "./src/assets/styles/variables.less";，跑一次构建，再删掉这行，缓存就强制刷新了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
