应使用 less-loader 的 additionalData 选项全局注入 CSS 变量或 mixin，通过 path.resolve 拼接绝对路径 @import 公共文件；modifyVars 仅支持变量重定义，无法注入 mixin 或样式规则。
less-loader如何全局注入公共CSS变量或mixin？
直接在每个 .less 文件里 @import 公共文件太重复，Webpack 支持通过 less-loader 的 additionalData 选项，在所有 less 编译前自动插入一段代码——这是最干净的全局注入方式。
-
additionalData只接受字符串或函数，不能写路径别名（如~@/styles/vars.less），必须用相对路径或绝对路径（推荐path.resolve） - 函数形式更灵活，可按文件路径条件注入：比如只对
src/components/下的 less 注入主题变量，而跳过node_modules或测试文件 - 若注入的是
@import语句，确保被导入的文件本身是合法 less（无语法错误），否则整个编译会失败，且错误堆栈指向“generated code”，难定位 - 不要在
additionalData里写@value: #333;这类定义后不使用的变量——less 不报错，但可能干扰后续同名变量作用域
为什么用 lessOptions.modifyVars 不适合全局样式注入？
modifyVars 是 less 官方为「主题替换」设计的，只接受键值对对象，用于覆盖 @primary-color 这类预设变量；它不能注入 @mixin、.class 规则或 @import 语句。试图用它塞进 CSS 声明（如 { 'body': '{ color: red; }' }）完全无效——less 不识别这种写法，也不会报错，只会静默忽略。
- 真正生效的只有变量重定义，例如：
{ '@text-color': '#222' } - 如果你需要全局 class（如
.clearfix）或响应式 mixin，modifyVars无能为力，必须走additionalData - Ant Design 等 UI 库的定制依赖
modifyVars，但它和「注入公共样式」是两件事，混用容易误判问题来源
配置示例：注入 vars.less 和 mixins.less
假设项目结构为 src/styles/vars.less 和 src/styles/mixins.less，Webpack 规则应这样写：
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
additionalData: `@import "${path.resolve(__dirname, 'src/styles/vars.less')}";\n@import "${path.resolve(__dirname, 'src/styles/mixins.less')}";`
}
}
]
}
- 注意路径必须用
path.resolve，不能用./src/styles/...，否则构建时路径解析失败 -
javascriptEnabled: true是启用 less 中~路径别名和 JS 表达式的前提（尤其 Ant Design 5.x 需要） - 如果
additionalData内容较长，建议抽成函数并加try/catch+fs.readFileSync，避免路径错导致整个 less 编译中断
常见踩坑：注入后变量仍报 undefined
现象是编译不报错，但使用 @primary-color 的地方提示 variable @primary-color is undefined。这不是 additionalData 没生效，而是 less 编译顺序问题：
- Webpack 的
oneOf规则中，若同时存在/\.module\.less$/和/\.less$/，必须确保additionalData同时配在两条规则下——模块化 less 不走普通规则，漏配就失效 - 某些 UI 库（如 antd）的组件内部 less 文件会先于你的
additionalData加载，导致变量未定义；此时需用less-loader@7.3.0（Webpack 4 兼容版）+ 显式webpackImporter: false控制导入链 - VS Code 的 less 插件无法识别
additionalData注入的内容，编辑时会标红变量——这是编辑器局限，不影响实际编译
modifyVars，先检查 additionalData 是否真的跑到了那个 .less 文件头上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
