手把手教你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. 如果以上都找不到,那么会报错。
目录
相关文章
|
6天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
21 5
|
7天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
32 7
|
9天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
26天前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
68 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
7天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
20 2
|
9天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
21天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
46 1
|
21天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
39 2
|
2月前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
80 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)