最轻量可控的方式是用 css.loaderoptions.less.additionaldata 注入 @import 字符串；modifyvars 仅适用于 ui 库主题定制，不支持 @import、mixin 和嵌套逻辑，且与 additionaldata 冲突时会被忽略。
直接用 css.loaderOptions.less.additionalData 注入 @import 字符串，是当前最轻量、最可控的方式；style-resources-loader 虽然流行，但路径解析容易出错，且和 Vue CLI 插件链偶有冲突。
为什么不要用 modifyVars 做业务变量
modifyVars 是 Less.js 提供给 UI 库主题定制的机制（比如 Ant Design），它会把变量“编译期替换”进所有 Less 文件，但不支持 @import、.mixin 或嵌套逻辑。你写 @primary-color: #42b983 没问题，但一旦在 variables.less 里加了 @import "mixins.less" 或 .btn() { ... }，它就完全失效。
业务项目真正需要的是“每个 Less 编译单元都自动前置加载一组文件”，不是变量值替换。
-
modifyVars只接受扁平 key-value 对，不能导入外部文件 - 无法复用
mixins、functions、namespaces - 和
additionalData同时配置时，modifyVars会被忽略（Webpack 5+ 行为）
css.loaderOptions.less.additionalData 怎么配才生效
必须是字符串，且 @import 路径需能被 Webpack 正确解析——推荐用 ~@/styles/variables.less 形式，依赖 Webpack 的 resolve.alias（如默认的 @ 指向 src）。
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `@import "~@/styles/variables.less";`
}
}
}
}
-
additionalData是 Webpack Loader 层的注入，对每个<style lang="less"></style>都生效，包括scoped样式 -
~@/写法依赖 Webpack alias，比path.resolve()更简洁、不易手误 - 如果
@别名被自定义过（比如指向src/components），就得改用~src/styles/variables.less - 多个文件用分号拼接：
`@import "..."; @import "...";`
style-resources-loader 的典型翻车点
这个 loader 看似“专为全局变量设计”，但实际踩坑率很高：它不走 Webpack alias，也不识别 ~，只认绝对路径；而且插件注册顺序不对时，会和 css-loader 冲突，导致样式丢失或变量未定义。
常见错误现象：ReferenceError: @primary-color is not defined，或控制台报 Can't resolve '@/styles/variables.less'。
-
patterns必须用path.resolve(__dirname, './src/styles/variables.less')，@/或~/全部无效 - 如果项目用了 pnpm workspace，
style-resources-loader可能读不到子包下的node_modules/less，报Cannot find module 'less' - Vue CLI 5.0+ 中，若同时配置了
css.loaderOptions和pluginOptions['style-resources-loader']，后者可能被静默忽略 - 它对
<style lang="less" scoped></style>的处理和additionalData不一致：前者是“先注入再编译”，后者是“每文件注入后编译”，语义更贴近直觉
变量文件本身要注意什么
别在 variables.less 里写 :root 或 CSS 类，它只是被 @import 进来的 Less 上下文，不是最终输出的 CSS。
推荐结构：
// src/styles/variables.less
@primary-color: #42b983;
@border-radius-base: 4px;
// mixins 可直接用
.center() {
display: flex;
justify-content: center;
align-items: center;
}
- 避免在变量文件里写
@import相对路径（如@import "./mixins.less"），因为additionalData注入后，当前文件上下文是每个组件的<style></style>，路径基准会错乱 - 所有
@import都建议用~@/开头，确保路径唯一确定 - 如果变量文件里用了
javascriptEnabled: true相关函数（如color(~"rgb(255, 0, 0)")），要确认less版本 ≥ 4.0.0
真正麻烦的不是配置本身，而是变量作用域的隐式传递——additionalData 让每个样式块都“自带上下文”，而 style-resources-loader 是靠 loader 链“劫持”编译流程，一旦中间环节（比如 CSS 提取、PostCSS）顺序不对，就悄无声息地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
