vue-cli3配置less

1.在vue-cli3中增加对less的支持

安装less和less-loader
命令： npm i less less-loader -D

2.设置全局样式

style-resources-loader的作用是：导入公共的样式文件，这样我们就可以省去每个文件使用@import导入全局样式文件了。


1.安装style-resources-loader和vue-cli-plugin-style-resources-loader
命令：vue add style-resources-loader
使用该命令会自动安装vue-cli-plugin-style-resources-loader
注：vue add 指令是vue-cli3提供的，实际上是用yarn来安装插件的。


2. 选择预处理器
安装完成后需要自行选择预处理器，这里选择less预处理器。

3. 添加全局less样式和全局mixin混入

分别添加测试代码，以便后面测试：

• global.less

@color1: red;

• mixins.less

.primary-btn{  color: #fff;
    background-color: #07c160;
    border: 1px solid #07c160;
    width: auto;
    height: 44px;
    border-radius: 2px;
    outline: none;
    font-size: 16px;
}

3.配置vue.config.js

const path = require('path');
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, "./src/assets/less/global.less"),
        path.resolve(__dirname, "./src/assets/less/mixins.less"),
      ]
    }
  }
}

• options选项的参数配置
  patterns：字符串或数组，表示导入资源的路径，绝对路径。
  injector：‘prepend’ 或者 ‘append’， 表示资源导入的位置，在之前还是之后，样式后导入的会覆盖前面导入的。
  resolveUrl： 是否允许@import形式导入，默认true。
  
  

4.测试

• vue template 测试代码

<template>
  <div id="app">
    <!-- 测试全局less样式 -->
    <div class="test-global-less">Hello Less</div>
    <!-- 测试全局less混入 -->
    <button>test mixins</button>
  </div>
</template>

• vue style 测试代码

<style lang='less'>
.test-global-less{
  color: @color1;
}

button{
  .primary-btn;
}
</style>

• 测试效果（成功）