我把我挖的坑给你们看看。如果是你的菜，麻烦点个赞，也帮助更多的小伙伴。
- 首先添加全局的global.less文件, 具体位置我是放在 src/assets/css/global.less 如图
global.less内容为以下:
@color000:#000;//设置全局的黑色,具体看自己的业务要求
- 在全局文件下创建vue.config.js文件，如图
vue.config.js内容为以下：
const path = require("path");
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
// 全局变量路径，不能使用路径别名
path.resolve(__dirname, "./src/assets/css/global.less"),
],
},
},
};
- 在随便一个组件中引用@color000 变量，我的是新建的vue项目，我具体使用的组件在Home.vue中，代码如下：
<template>
<div class="home">
<div class="less"></div>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
<style lang="less" scoped>
.less{
width:100px;
height:100px;
background-color:@color000;
}
</style>
然后ctrl+s保存，就会来了第一个报错，
Failed to resolve loader: less-loader
You may need to install it.
如图：
4. 我就一把梭哈 全部安装上把，具体有五个依赖
npm install less
npm install less-loader
npm install sass-resources-loader
npm install style-resources-loader
npm install vue-cli-plugin-style-resources-loader
你直接复制把，以免打错了。
装完第一个中…
…
…
…
…
第五个装完了…
我们先看看package.json装上这五个依赖没，我的已经装上了，贴代码把 不贴图了：
"dependencies": {
"core-js": "^3.6.5",
"less": "^4.1.2",
"less-loader": "^10.0.1",
"sass-resources-loader": "^2.2.4",
"style-resources-loader": "^1.4.1",
"vue": "^3.0.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
注意注意注意，这里贴代码，主要是给你们看版本而已，因为你在装依赖的时候没有具体到版本，都是以最新的版本给你安装，但是我也给我自己写个日期（2021年11月26日）在这里，这个坑有点恶心，我之前还把node版本换了
。。。
目前我的node版本为：
v12.16.1
npm版本为：
v6.13.4
然后继续重启服务把
npm run serve
又报错了。。。
ERROR Failed to compile with 1 error 22:46:02
error in ./src/views/Home.vue?vue&type=style&index=0&id=fae5bece&lang=less&scoped=true
Syntax Error: TypeError: this.getOptions is not a function
这个报错，你想了解的话 ，你自己百度把。
我百度了，就说有些版本太高了，兼容不太好，所以要降级。
我的解决方案是，把所有刚刚装的依赖都卸载了，具体有这些
npm uninstall less
npm uninstall less-loader
npm uninstall style-resources-loader
我只卸了这3个东西，其他2个我这是没有问题，如果你们有问题，就降级看看。
我就不把卸的代码贴出来了。我把装好的依赖版本贴出来
npm install less@3.0.0
npm install less-loader@5.0.0
npm install style-resources-loader@1.0.0
我更新的package.json依赖有以下，我还是贴代码安全点，因为图片我怕久了之后会丢失，
"dependencies": {
"core-js": "^3.6.5",
"less": "^3.0.0",
"less-loader": "^5.0.0",
"sass-resources-loader": "^2.2.4",
"style-resources-loader": "^1.0.0",
"vue": "^3.0.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
然后重启npm run serve， 终于成功了，这个只能贴图了。
对了，还有一个坑，见图
这个坑你把上面五个依赖装好，应该都没有多大问题了，具体这个坑装的依赖为：
npm install sass-resources-loader
npm install vue-cli-plugin-style-resources-loader
如果还是不行，就降降版本。
怎么降版本？
在后面加上@1.0.0
例如：
npm install sass-resources-loader@1.0.0
一般按照我上面的步骤来，应该都没有多大问题了。
最后的最后，希望你们多点点赞，多帮助其他小伙伴。谢谢。
学到的就要教人，赚到的就要给人。感谢！