1.安装
npm i less less-loader -S
2.更改配置文件build/webpack.base.conf.js

在module.export暴露的对象中，为module的rules添加如下配置：

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
},
配置好后如下：

3.使用
在style标签上添加lang属性，指定使用的样式语法；

<style scoped lang='less'>
</style>
 

案例
代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2><span>测试</span></h2>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style scoped lang='less'>
h1, h2 {
  font-weight: normal;
  span{
    color:red
  }
}
</style>

在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)
效果：

--------------------- 
转载自 

作者：Beamon__ 
来源：CSDN 
原文：https://blog.csdn.net/beamon__/article/details/83378006