style-resources-loader 通过拼接 less 文件内容到每个 开头实现变量和 mixin 注入，需绝对路径、正确顺序及清除缓存；而 less-loader 的 globalvars 仅支持扁平字符串键值对，无法处理 @import、mixin 或函数调用。
必须用 style-resources-loader，less-loader 的 additionalData 对 Vue 单文件组件无效，globalVars 只能传字符串值，不支持 @import 或 .mixin()。
为什么 less-loader 的 globalVars 不行
它底层调用的是 Less 的 modifyVars，只接受扁平键值对，比如 { primaryColor: '#1890ff' }。所有值都会被强制转成字符串字面量——这意味着：
-
@import "variables.less"会直接报ParseError: Unexpected token -
.my-mixin() { color: @primary-color; }定义不了，因为globalVars不处理 mixin 声明 -
@secondary: darken(@primary, 10%);会失败，darken函数未注册 - 路径别名如
~@/styles/vars.less不识别，必须写死绝对路径（但globalVars根本不支持路径）
style-resources-loader 怎么配才真正生效
它不是“注入变量”，而是把指定 Less 文件内容，原样拼接到每个 <style lang="less"></style> 块开头，等效于手动写 @import。要跑通，三个条件缺一不可：
- 必须安装两个包：
style-resources-loader和vue-cli-plugin-style-resources-loader（Vue CLI 项目）；纯 Webpack 项目只需前者，但需手动加到use链里 -
patterns数组里的路径必须是path.resolve(__dirname, './src/styles/variables.less')这种绝对路径，@/或~/别名会报Cannot find module - 被注入的文件不能有语法错误：漏分号、括号不闭合、
.mixin()写在@media里，都会导致整个样式编译中断，页面白屏
Webpack 5 + Vue CLI 下的典型配置片段
以 vue.config.js 为例：
const path = require('node:path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/styles/variables.less'),
path.resolve(__dirname, './src/styles/mixins.less')
]
}
}
}
注意：
- 如果同时注入多个文件，顺序很重要：变量文件必须在 mixin 文件之前，否则 mixin 里引用的变量找不到
- 改完配置后必须彻底停掉
npm run serve，删掉node_modules/.cache目录再重启，否则旧缓存会让修改看似无效 - 热更新时，
variables.less本身修改不会触发 HMR，浏览器需手动刷新——这是当前技术限制，绕不过
最常被忽略的一点：注入的变量和 mixin 只在顶层作用域有效。如果你在 <style scoped></style> 里写 .btn { .text-overflow(); } 没问题，但写成 .container { .btn { .text-overflow(); } } 就会报未定义——loader 不会把内容展开进嵌套块内部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
