1. 安装

(1) npm i less --save-dev 把less源码安装到开发环境
(2) npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
(3) lessc -v 查看版本
(4) 在main.js中配置
import less from 'less'
Vue.use(less)
作用：在所有页面都可以使用less预编译css语言
(5) 独立的vue文件需要引入less <style lang="less"></style>

2. 使用

<template>
  <div id="app">
    <div class="box">
      <h1>欢迎使用less</h1>
    </div>
    <div class="box1">
      <div class="box2">
        <div class="box3"></div>
      </div>
    </div>
    <ul>
      <li v-for="(item, index) in 4" :key="index">{{ item }}</li>
    </ul>
    <div class="boxa">我是box1</div>
    <div class="boxb">我是box2</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang='less'>
// less 可以使用变量 可以嵌套
*{
    padding: 0;margin: 0;
  }
  @red: red;
  @blue:blue;
  @green:green;
  @imgurl: "../assets/";
  @k:100px;
  //定义一个函数；
  .test(@color:red,@size:14px){
      background: @color;
      font-size:@size;
  }
  .boxa{
  //  不传参，使用默认的；
      .test()
  }
  .boxb{
  //  给函数传参；
      .test(@color:orange,@size:30px)
  }
  ul{
    width: @k;
    height: @k;
    background: @blue;
  
    li:nth-of-type(1){
      width: @k - 20px;
      background: @red;
    }
    li:nth-of-type(2){
      width: @k + 20px;
      background: @green;
    }
  }
  
  .box1{
    width: @k*2;
    height: @k*2;
    background: @red;
    .box2{
       width: @k;
    height: @k;
    background: @blue;
      .box3{
   width: @k/2;
    height: @k/2;
    background: @green;
      }
    }
  }
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background: url("@{imgurl}logo.png") no-repeat;
    h1 {
      color: @red;
    }
  }
</style>

导入外部样式

（1）使用导入式 引入样式库

<style lang="less">
@import url(./less/common.less);
</style>

（2）在script中导入样式

import './less/common.less'