style-resources-loader是Vue CLI中注入Less全局变量最稳定方案；它通过自动追加Less文件内容到每个style块开头实现，需安装两个包、用绝对路径配置patterns、确保preProcessor匹配且无语法错误。
直接上结论：Vue CLI 项目中注入 Less 全局变量，style-resources-loader 是目前最稳定、兼容性最好、且支持 Vue CLI 3/4/5 的方案；css.loaderOptions.less.globalVars 虽然写法简洁，但仅适用于极简变量（如字符串/数字），无法导入 @import、mixin 或嵌套定义，实际项目中容易失效。
为什么不能只靠 less-loader + globalVars？
css.loaderOptions.less.globalVars 底层调用的是 less 的 modifyVars 机制，它只接受扁平键值对（例如 { primaryColor: '#1890ff' }），所有值都会被转成字符串字面量。这意味着：
- 你无法在其中写
@import 'xxx'—— 会报ParseError: Unexpected token - 无法定义
.mixin() { ... }或@function—— 它们不是“变量” - 无法引用其他变量（如
@secondary: darken(@primary, 10%)）——darken函数未注册，报错 - 路径别名（如
~@/styles/vars.less）不生效，必须用绝对路径
style-resources-loader 配置的三个关键点
这个 loader 实际是把指定的 Less 文件内容，自动追加到每个 <style lang="less"></style> 块的开头，等价于手动写了 @import './src/styles/variables.less';。要让它真正生效，注意以下三点：
- 必须安装两个包：
style-resources-loader和vue-cli-plugin-style-resources-loader（后者提供 Vue CLI 集成能力，缺一不可） -
patterns数组里的路径必须是path.resolve()绝对路径，不能用@/或~/别名，否则构建时报Cannot find module - 文件扩展名必须匹配
preProcessor: 'less'，且该文件里不能有语法错误（比如漏掉分号、括号不闭合），否则整个样式编译中断，页面白屏
常见报错及对应修复方式
遇到 “undefined variable” 或 “mixin is undefined”，往往不是配置错，而是加载顺序或内容问题：
立即学习“前端免费学习笔记（深入）”；
-
变量能用，mixin 用不了：检查
variables.less是否包含.my-mixin() { ... }定义，并确认它没被包裹在@media或&选择器内（loader 只注入顶层内容） -
重启后仍不生效：Vue CLI 缓存了 webpack 配置，必须彻底停掉
npm run serve，删掉node_modules/.cache目录再重启 -
报错
Module build failed: Error: Cannot find module 'less'：说明less和less-loader没装全，执行npm install less less-loader --save-dev -
scoped 样式里变量不生效：正常。scoped 不影响 Less 变量解析，只要 loader 注入成功，
<style lang="less" scoped></style>里照样能用@color-primary
最易被忽略的一点：如果你用的是 Vue CLI 5+（尤其是 @vue/cli-service >= 5.0.8），vue add style-resources-loader 可能因插件未适配而静默失败，此时务必手动安装两个依赖并手写 pluginOptions 配置 —— 自动化脚本不可信，路径和依赖版本才是关键。
