vue-cli2脚手架项目，如何使用less全局变量，解决@textColor is undefined问题

  最近想实现个一键换肤，需要配置全局less，控制全局变量。

  刚开始卡住了，我是先后安装了style-resources-loader和vue-cli-plugin-style-resources-loader，以及less-loader和less，然后配置vue.config.js，这样搞的，但是不起作用，一直报错，但是朋友那里就没问题。我的报错内容如下：

  今天恍然大悟，突然反应过来大概是vue-cli的版本有所不同，因为我这里的是2版本的，朋友那里好像是3版本的，我创建的是基于 webpack 模板的脚手架项目。

  那么vue-cli2如何使用less全局变量呢？

1、安装

  首先安装一下sass-resources-loader

npm install sass-resources-loader --save-dev

  然后安装一下less-loader和less

npm install less-loader@5.0.0 --save
npm install less --save

2、创建全局less文件

  我是在项目的src文件夹下的assets文件夹下，新建了theme.less文件，代码如下：

@textColor: red;

3、配置

  找到项目的build文件夹下的utils.js文件，找到exports.cssLoaders = function (options) {}，添加下面代码：

path.resolve(__dirname, '../src/assets/theme.less') //这里是全局less的路径，根据自己的修改

  然后找到这个函数的return{}，把``改成下面代码：

less: generateLoaders('less').concat({
  loader: 'sass-resources-loader',
  options: {
	resources: path.resolve(__dirname, '../src/assets/theme.less')
  }
}),

  具体如下图所示：

4、测试

  我是在HelloWorld.vue文件里，进行测试，

  npm run dev运行后，可以看到是ok的，如下图所示：

5、vue-cli3时，可以通过配置vue.config.js

  关于我文章开头说的，先后安装style-resources-loader和vue-cli-plugin-style-resources-loader，以及less-loader和less，然后在根目录配置vue.config.js，这种方式，在vue-cli3时是可行的，关于vue.config.js的配置如下：

const path = require("path");
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        //这里是全局less的路径，根据自己的修改
        path.resolve(__dirname, './src/assets/theme.less'),
      ],
    },
  },
};