手把手教你webpack3（10）Less-Loader配置简述

LESS-LOADER配置简述

前注：

文档全文请查看 根目录的文档说明。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里，发【Issues】。

DEMO地址

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文件同一个<style>标签，而引入的css文件会变成新标签；

【注二】

如果想要实现如下引用顺序：

1. .css 引用 .less；

那么必须在解析 .css 文件的时候，配置less-loader，配置如下：

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

当以css文件作为入口时，起作用的是上面这个配置，而不是 test: /\.less$/, 这个配置了。

2.2、globalVars

名称 类型 默认值 描述 globalVars {Object} undefined 声明全局变量

正常使用less的全局变量没什么好说的（创建一个用于配置全局样式的 .less 文件，然后在需要使用全局样式的 .less文件里引用他）。

当然，这种方式很麻烦。

但是，less-loader里还提供了另外一种使用全局变量的方式，即在options.globalVars里进行配置。

示例代码：

//webpack.config.js...test: /\.less$/,use: [    'style-loader',    'css-loader',    {        loader: 'less-loader',   // compiles Less to CSS        options: {            // 这里配置全局变量            globalVars: {                'ten': '10px',    // ten可以是ten，也可以是@ten，效果一样，下同                'hundred': '100px'            }        }    }]...

// style.less...height: @hundred;...border: @ten dotted green;...

编译后变为：

...height: 100px;...border: 10px dotted green;...

【注】

1. globalVars 的 key ，前面有没有 @ 的效果是一样的；
2. 用 modifyVars 替代 globalVars 的效果似乎是一样的（简单测试后如此，但不确定）；

2.2、paths

名称 类型 默认值 描述 paths {Array} undefined less文件里，使用独立的文件解析路径

解释：

1. 首先，这个不影响 js 文件导入 less 文件，只是影响 less 文件引入其他 less 文件（不包括图片文件等）；
2. 值是数组，数组的元素的类型是字符串（但实测中，数组只有第一个元素生效，其他似乎会被忽视）；
3. 数组的元素的值，需要是文件夹的【绝对路径】；
4. 假如图片／文件在使用非相对路径时，例如：是 bar.less 时，less-loader 会去 paths 数组里第一个元素描述的绝对路径，去找对应的文件；

使用 paths 时，路径寻找顺序：

1、假如配置如下：

paths: [    path.resolve(__dirname, "test")]

2、less文件里，这么引用其他 .less 文件：

@import 'foo.less';

3、webpack的寻找顺序是：

1. 在同目录下寻找 ‘foo.less’，没有找到的话进入下一步；
2. 在 path.resolve(__dirname, "test") ，即 webpack.config.js 的同目录中的 test 文件夹里，去找 foo.less，没有找到的话进入下一步；
3. 最后，会在执行shell命令的文件夹中，去找 foo.less这个文件；
4. 如果以上都找不到，那么会报错。