Webpack(4): 处理 less 和 scss

279 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情

前言

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

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

准备文件

示例代码

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

image-20220808090421370

准备 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 文件,这个没啥可说的:

image-20220808090735550

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

image-20220808090811640

竟然依赖了两个模块来编译 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 的兼容性