关于Less在Vue中的使用

前言：先说我的问题。我们的vue项目整体颜色风格做了调整，甲方要求本次要将所有与颜色相关的当要单独提取出来，放在一个文件里，方便后期更好地维护。这时候我认为用less是个很好的选择，可以将所有的公用颜色自定义，在需要的页面通过变量的形式引用。接下来说方法。

1、首先需要安装less和less-loader依赖

注意less-loader的版本不要太高，不然可能无法使用，以下的安装命令指定了下载版本。可以先查看以下项目中的package.json文件。如果有less和less-load，以下这个命令可以省略。

npm install --save less@3.11.1 less-loader@5

2、安装 style-resources-loader和vue-cli-plugin-style-resources-loader用于全局配置less。

vue add style-resources-loader

在输入此命令后，会出现不同的预处理选择，选择less点击回车。以上两个步骤结束之后，你的package.json文件中会多出以下依赖：

并且，在vue.config.js文件中会增加以下配置：（红色框内是你存放less文件的路径)

3、下面我们来创建一个less。可选择在assets目录下建一个css文件夹，专门用来存放less文件。并在里面自定义几个变量。

4、在main.js文件中全局引用这个less文件（注意你自己的less文件存放位置，路径不要写错）

5、哪里需要哪里使用

注意style标签一定要加上 lang='less'