在我们遇到复杂多页面的vue项目时，我们往往需要配置一些全局统一的样式，就比如按钮的颜色，标题的字体大小，鼠标悬浮样式等。大家都知道现在的三大css预处理语言sass、less、stylus，这里我就先讲下less公共文件的配置。

1、请确保`less`、`less-loader`正确安装

这是很关键的一步，因为后面我们需要安装的插件全都依赖这两个插件。

npm i less

less官方安装及使用文档：www.npmjs.com/package/les…

npm i less-loader

||

npm install less-loader --save-dev

||

npm install -D less-loader less

less-loader官方安装及使用文档：www.npmjs.com/package/les…

2、安装 `style-resources-loader`

注意：这里有两种安装方式，一般推荐第一种，如果第一种不行再用第二种。

vue add style-resources-loader

vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果安装失败的话，就采用第二种方法。

选择Less即可。安装完成后，大家可以看下项目的vue.config.js文件，多了个配置项：pluginOptions，这个是安装style-resources-loader时自动配置的，但是里面配置的内容为空，还需要后面自己在填入。

npm i style-resources-loader

官方安装及使用文档：www.npmjs.com/package/sty…

npm i vue-cli-plugin-style-resources-loader

官方安装及使用文档：www.npmjs.com/package/vue…

安装结果和第一种一样，打开vue.config.js配置。

主要需要配置的内容在patterns里面，如下我是我配置，大家只需要按照同样的方式配置即可。

配置完后，大家就可以在配置的.less文件中写公共样式了。

注意：定义less变量需要使用@，像这样：