手把手教你webpack3(10)Less-Loader配置简述-阿里云开发者社区

开发者社区> 零零水> 正文

手把手教你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-loadercss-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. 如果以上都找不到,那么会报错。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
想将算法进一步开发吗?手把手教你搭建基于CNN模型的Flask Web应用
想将算法进一步开发应用产品吗?本文手把手教你搭建基于CNN模型的Flask Web应用,算是抛砖引玉了。感兴趣的读者可以将自己的算法开发成其他类型的应用产品,说不定下一个人工智能创业公司Boss就是你哦!
4890 0
Apache2.4配置SSL后启动报错AH02577: Init: SSLPassPhraseDialog builtin
Apache2.4配置SSL后启动报错:AH02577: Init: SSLPassPhraseDialog builtin is not supported on Win32 (key file C:/Apache24/conf/server.key) 原因是因为Win32不支持加密。
1567 0
webpack配置
webpack配置 配置 Webpack 的方式有两种: 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置; 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack --devtool source-map。
2353 0
如何配置阿里云容器服务K8S Ingress Controller使用私网SLB
本文主要讲述如何配置阿里云容器服务K8S Ingress Controller使用私网SLB。
11744 0
手把手教你----MyEclipse中 配置 Tomcat
<div class="markdown_views"> <p></p> <div class="toc"> <ul> <li> <a href="#%E7%94%B5%E8%84%91%E4%B8%8A%E9%85%8D%E7%BD%AEtomcat%E6%9C%8D%E5%8A%A1%E5%99%A8">电脑上配置Tomcat服务器</a><ul> <li><a href=
1533 0
webpack常见的配置项
使用vue init webpack test(项目文件夹名)命令初始化一个vue项目,cd test,然后安装依赖npm install之后会生成一些默认的文件夹和文件,这些文件和文件夹中有些和配置有关的。
1234 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载