在vue项目中使用less

---

安装依赖

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 编译出错