安装依赖

yarn add less less-loader css-loader style-loader -D

配置

在 build/webpack.base.conf.js 中配置 loader

module.exports = {
	...
	module: {
    rules: [{
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader', /* 顺序不能变*/
      }]
}

开始使用

在使用时在style中添加属性 lang="less" 之后就可以识别和编译了。

<template>...<template>
<script>...</script>
<style lang="less" scoped>
.wrap {
  margin: 0;
  color: '#fe59df';

  .content {
    display: flex;
  }
}
</style>

编译问题

如果在编译的过程中出现问题，可以参考这篇文章😊→ less-loader 编译出错