Webpack5 学习（4）：处理 less 和 sass 预处理器

前言

上文介绍了如何在webpack 中处理 css 文件，主要依靠 css-loader 和 style-loader，作用分别是 解析 css 模块为 webpack 识别的模块，使用 <style> 标签将 css 样式插入到 html 文件中。同时介绍了如何配置 loader 解析模块的规则。

本文会介绍在 webpack 中处理 less 和 scss 文件的方法。

准备文件

示例代码

该系列的代码示例已经上传到 Github，点此访问。

准备 less 和 scss 文件：

//  src/index.less

@bgColor: red;
body {
  background: @bgColor;
}

//  src/index.scss

$color: white;

body {
  color: $color;
}

将它们在入口文件中导入：

import './index.css'
import './index.less'
import './index.scss'

document.querySelector('body').innerHTML = 'Hello'

安装 loader

pnpm add -D less less-loader sass sass-loader

less-loader 的主要作用是帮助 webpack 识别 .less 文件，同时底层会调用 less 模块将 .less 文件编译为 css，供后续的 loader 调用处理。sass-loader 的作用也是如此，加载 .sass 或者 .scss 文件并将他们编译为 CSS。

配置 loader

module.exports = {
  // ......
  module: {
    rules: [
      {
        test: /\.less$/,
        // loader 从右到左执行，经过 less-loader 转为 css，再经 css-loader 转为 webpack 识别的模块，最后插入到页面中
        use: ['style-loader', 'css-loader', 'less-loader'],
      },

      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ]
  }
}

打开命令行窗口，执行打包命令：

pnpm webpack

现在 webpack 完成了对 less 和 scss 模块的打包工作，并将编译后的 CSS 插入到了 html 文件中。

浏览器打开 index.html：

dart-sass 和 node-sass

先来看下 less-loader 和 sass-loader 它们两个的依赖情况。

less-loader 依赖了 less 来编译 less 文件，这个没啥可说的：

sass-loader 依赖 sass 和 node-sass 模块来编译 scss 文件：

竟然依赖了两个模块来编译 scss 文件？

其实 sass 的发展经历了三个时期：

1. ruby sass：采用 ruby 实现 sass 编译器，时代的开创者，不能用在 node 环境中
2. node-sass：采用 c++ 实现 sass 编译器，可以在 node 中编译 sass 文件。不再推荐使用
3. dart-sass：采用 dart 实现的编译器，性能更好。推荐使用

虽然 sass-loader 默认依赖了 node-sass 和 sass（就是 dart-sass）模块，但是默认情况下它会使用 sass 模块来进行编译。

loader 的其他配置

目前在配置 module.rules 时，主要用到了两个配置项：

• test ： 匹配要处理的模块类型
• use：使用哪些 loader 来处理模块

除了这两个配置项外，这里再介绍一些常用的其他的选项。更多的可以去阅读官方文档。

loader

值是一个 loader 的名字，是 use 的简写，已废弃。

{
        test: /\.css$/,
        loader: 'css-loader'
 }

options

传给 loader 的配置项：

{
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 使用哪个模块来编译 scss 文件，默认就是 sass
              implementation: require('sass'),
            },
          },
        ],
}

exclude

排除掉匹配的资源，不使用 loader 处理

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

include

设定模块匹配的范围，交给 loader 处理

{
        test: /\.css$/,
        user: ['css-loader'],
        include: path.resolve(__dirname, './node_modules/normalize.css')           
 }

use

use 用来执行使用哪些 loader 来加载模块，是一个应用于模块的 UseEntries 数组。

有多种使用形式：

{
   use: [ 'style-loader' ] // 使用一个 loader
    
   use: [ 'style-loader', 'style-loader' ] // 使用多个 loader
     
   use: [ { loader: 'style-loader', options:{}} ] // 给 loader传递的选项，需要写成对象的形式
}

小结

本文介绍了如何在 webpack 处理 less 和 scss 模块，主要使用两个 loader——less-loader 和 sass-loader。它们底层分别使用了 less 和 sass 来将各自的文件编译为普通的 css 文件 ，最后才能被浏览器识别和解析。

同时也介绍了 module.rules 的其他的一些配置项，尤其是 use 属性的多种用法。

下篇文章，会介绍如何在 webpack 处理 css 的兼容性。