additionaldata 是最直接有效的方案，它通过在每个 .less 文件编译前自动拼接 @import 语句注入全局变量和 mixin，不依赖路径相对关系且支持完整 less 语法。
less-loader 的 additionalData 是最直接有效的方案
Webpack 生态下，less-loader 本身不提供“全局变量”概念，但它的 additionalData 配置项能实现在每个 .less 文件编译前自动拼接一段代码——这正是注入 @import 的最佳位置。
它不依赖文件路径相对关系，也不需要你在每个样式块里手动写 @import，更不会因目录嵌套变深而失效。
-
additionalData必须是字符串或返回字符串的函数，内容要以@import开头，且路径必须可被 Webpack 正确解析（推荐用@/styles/variables.less这类别名，但前提是resolve.alias已配好） - 如果变量文件里定义了
.my-mixin() { }或@function，它们会一并生效；但注意：不能在@media或嵌套选择器内定义 mixin，否则 loader 不会提取 - 值中若含换行或单引号，建议用模板字符串包裹，避免解析失败；例如：
additionalData: `@import "@/styles/variables.less";`
style-resources-loader 更适合 Vue CLI 项目
Vue CLI 默认对每个 <style lang="less"></style> 单独调用 less-loader，彼此隔离。此时 additionalData 虽然可用，但 style-resources-loader 提供了更明确、更稳定的语义支持，尤其在 Vue CLI 3/4/5 中兼容性更好。
- 必须同时安装两个包：
style-resources-loader和vue-cli-plugin-style-resources-loader（后者用于自动注册 loader） -
patterns字段只接受绝对路径，path.resolve(__dirname, '../src/styles/variables.less')是安全写法；用@/或~/会报Cannot find module - 该 loader 实际行为等价于把
variables.less全部内容复制粘贴到每个<style></style>块顶部，所以它支持@import、.mixin()、嵌套定义等完整 Less 语法
别碰 css.loaderOptions.less.globalVars
这个配置项看似简洁，但底层走的是 Less 的 modifyVars 机制，只接受扁平键值对，所有值都会被转成字符串字面量——它根本不是“注入变量文件”，而是“覆盖编译时变量”。
- 你无法在里面写
@import 'xxx'，会直接报ParseError: Unexpected token - 不能定义 mixin、函数，也不能引用其他变量（比如
@secondary: darken(@primary, 10%)中的darken函数未注册） - 路径别名（如
~@/styles/vars.less）完全不识别，必须硬编码绝对路径，且仅限简单值（{ primaryColor: '#1677ff' }）
常见错误现象和修复要点
变量用了却报 undefined variable，或者 mixin 调用不生效，往往不是配置漏了，而是细节卡住了。
- 热更新后变量没刷新？这是
style-resources-loader+vue-style-loader组合的已知限制：修改variables.less后必须手动刷新页面，HMR 不会触发重编译 - 整个页面白屏？检查
variables.less是否有语法错误（漏分号、括号不闭合），loader 会中断全部样式编译 - 变量能用，mixin 报错？确认 mixin 定义在文件顶层，没被包裹在
@media、&或其他选择器块内 - 重启后仍不生效？Vue CLI 缓存了 webpack 配置，删掉
node_modules/.cache再跑npm run serve
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
