vue+vue-cli3项目中引入less变量

发现问题的经过

	最近在做自己练手的vue项目，从项目初始化到项目配置，当我想要在项目中使用less变量时，遇到了问题：

1. 初始化导致后面的问题
   在我使用@vue/cli初始化我的项目时，不知道什么问题，一直选择不了CSS Pre-processors这一项，也就没办法预先设置关于css的预处理器，只能选择到后面开发时再安装相应的配置项。

2. 问题发生主要经过
   我想在项目中使用less语言，不可避免需要先运行npm install less less-loader -D在项目中安装less。后面在定项目主题色时想着之后项目可以需要根据需求调整，如果一个一个替换，感觉很麻烦，于是想着如果可以用一个变量来定义这个主题色，那后面修改起来会很简单，只需要修改一个文件就好。于是想到了Less变量

3. 按照less变量命名要求，我创建了theme.less文件，并在其中命名了相关变量。并在main.js中引入了这个文件，原以为就可以愉快的使用变量了，但是当我在login.vue中使用时，报错了。
   less变量命名
   使用时，直接使用变量名就可以了。如：background:@theme-bg-color
   此时报错@theme-bg-color is not defined.于是便百度去了。找到了正确使用的步骤

下载相应的插件并添加配置

1. 要想在你的项目中使用less变量，首先需要在vue项目中安装可以编译less的组件；
   运行npm install less less-loader -D可以将less安装到项目中
2. 运行npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 安装相应的插件。
3. 在vue.config.js的module.exports中添加配置项

pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, "src/common/css/theme-color.less")] // 引入全局样式变量
        }
    }

然后运行npm run serve即可正常使用less变量了。