less-loader配置

1、概述

less-loader 用于处理编译 .less 文件，将其转为 css文件代码。

使用 less-loader 的话，必须安装 less，单独一个 less-loader 是没办法正常使用的。

安装

npm install --save less-loader less

 

2、配置

 

2.1、无任何配置

less-loader 不使用任何配置的时候，也可以正常使用。但需要配合 style-loader 和 css-loader 一起。

示例配置（其他略，参照github上的示例DEMO）：

 {
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}

less文件：

@hundred: 100px;

#app {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid red;
  background: url('./logo.png') no-repeat;
  box-sizing: border-box;
  .top {
    position: absolute;
    top: 0;
    left: @hundred;
    right: @hundred;
    height: @hundred;
    border: 2px dotted green;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: @hundred;
    right: @hundred;
    height: @hundred;
    border: 2px dotted green;
  }
}

编译后结果：

#app {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid red;
  background: url(fb05d05e8b958e9341f72003afbffed3.png) no-repeat;
  box-sizing: border-box;
}
#app .top {
  position: absolute;
  top: 0;
  left: 100px;
  right: 100px;
  height: 100px;
  border: 2px dotted green;
}
#app .bottom {
  position: absolute;
  bottom: 0;
  left: 100px;
  right: 100px;
  height: 100px;
  border: 2px dotted green;
}

说明运行正常。

【注一】

1. .less 可以通过 @import 来引入其他的 .less 文件 或 .css 文件；
2. 引入的less文件会和之前的less文件同一个