less全局设置，less安装步骤设置全局，vue组件使用less。this.getOptions报错处理

我把我挖的坑给你们看看。如果是你的菜，麻烦点个赞，也帮助更多的小伙伴。

1. 首先添加全局的global.less文件, 具体位置我是放在 src/assets/css/global.less 如图
   
   global.less内容为以下:

@color000:#000;//设置全局的黑色,具体看自己的业务要求

2. 在全局文件下创建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"),
      ],
    },
  },
};

3. 在随便一个组件中引用@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

一般按照我上面的步骤来，应该都没有多大问题了。

最后的最后，希望你们多点点赞，多帮助其他小伙伴。谢谢。

学到的就要教人，赚到的就要给人。感谢！