Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要讲解webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源这里是引用

在前端开发中，样式是必不可少的一部分。编写样式最早是使用最原始的 css，随着前端工程化的发展，逐渐出现了很多 css 预处理器，如 scss/sacc、less、stylus 等。通过这些 css 预处理器，是通过对应的语言为 css 添加编程特性，帮助我们编写与时俱进、可维护性较高的样式代码。

Webpack 本身并不能识别各种样式资源（css、less、scss等），需要通过多种 loader（加载器）来帮助 Webpack 处理样式资源。

1 处理 CSS 资源

1.1 编写css代码

继续前一节的工程，在 src 目录下创建目录 style/css/，并在css目录下创建文件 css-demo.css：

.demo-css {
  width: 300px;
  height: 80px;
  background: red;
}

在 template/index.html 中标签后面添加一个 div 标签，class 属性为上面定义的样式 demo-css:

<div class="demo-css">css demo</div>

由于之前在 webpack.config.js 指定了了 webpack 打包的入口文件为 src/main.js，如果不在该文件、该文件直接或间接引入的文件中引入css-demo.css 文件，webpack是不知道要打包这个 css 文件的。所以需要在 main.js 中引入该 css 文件：

import './style/css/css-demo.css'

1.2 打包测试

现在执行前一节配置的 build 命令让 webpack 打包：yarn build。

执行后会发现报错：

ERROR in ./src/style/css/css-demo.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

从报错信息中可以看出 webpack 默认无法解析 css 文件。这时候就需要使用 loader 扩展 webpack 的处理能力。

1.3 安装依赖

webpack 处理 css 样式资源需要两个loader依赖：css-loader 和 style-loader。

yarn add css-loader style-loader -D

1.4 配置 css 相关 loader

在 webpack.config.js 中配置上面安装的两个 loader，配置后 webpack.config.js 文件如下：

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  mode: 'development'
}

module 节点是新增的内容，该节点的rules 属性就是配置loader。rules 为一个数组，数组每个对象配置针对什么类型的文件，使用哪些loader来处理。每个对象属性意思分别如下：

• test：处理什么文件，可以是具体的文件名，也可以是正则表达式。这里配置的 /\.css$/ 表示以 css 结尾的文件，即所有css文件。
• use：使用哪些loader来处理，多个loader的执行顺序为从下往上（如果写在一行，就是从右到左）。这里配置了style-loader 和 css-loader，表示使用这两个loader来处理 css 文件，并且先使用 css-loader 来处理 css 文件，处理后的结果再使用 style-loader来处理。那这两个loader分别是干啥用的呢？

css-loader： 把 css 文件编译为 CommonJS 模块，并将该模块引入到 JS 中。

style-loader：创建 style标签，将 JS 中的 CSS 添加到 HTML中。

TODO 这里添加一张图描述

1.5 打包测试运行

配置好 webpack.config.js 后，便可以运行 build 命令让 webpack 打包了。

yarn build

这时可以看到 webpack 打包成功。

webpack 5.73.0 compiled successfully in 632 ms

在浏览器中运行 template/index.html，可以看到 css-demo.css 中定义的样式已经生效。查看网页元素，可以在head中看到上面定义的样式插入到style标签里面：

2 处理 scss/sass 资源

scss 与 sass 类似，只是在写法上面，sass 不使用花括号和分号。

2.1 编写 scss/sass 代码

在 src/style 目录下创建目录 scss，并在 scss 中分别创建样式文件scss-demo.scss 和 sass-demo.sass。

scss-demo.scss：

.demo-scss {
  width: 300px;
  height: 80px;
  background: blue;
}

Sass-demo.scss:

.demo-sass
  width: 300px
  height: 80px
  background: darkblue

在 template/index.html 中添加测试元素div:

<div class="demo-scss">scss demo</div>
<div class="demo-sass">sass demo</div>

在 src/main.js 中引入上面两个样式文件：

import './style/scss/scss-demo.scss'
import './style/scss/sass-demo.sass'

2.2 安装依赖

处理 scss 文件，需要使用到 sass、sass-loader、css-loader 和 style-loader。sass-loader 用于将 scss/sass 文件编译为 css 文件，编译后的 css 文件依次经过 css-loader 和 style-loader 处理，最后通过style标签插入到HTML中。sass-loader 需要依赖 sass。

由于前面已经安装了 css-loader 和 style-loader，此处再安装 sass 和 sass-loader 即可。

yarn add sass sass-loader -D

2.3 配置 scss/sass 相关loader

上面在rules中配置了针对 css 文件的 loader，现继续在后面配置针对 scss/sass 配置的loader：

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

TODO 添加一个图

2.4 打包测试运行

先执行 yarn build 打包，打包成功后在浏览器中查看：

3 处理 less 资源

3.1 编写 less 代码

在 src/style 目录下创建目录 less，并在 less 中创建样式文件less-demo.less：

less-demo.scss：

.demo-less {
  width: 300px;
  height: 80px;
  background: green;
}

在 template/index.html 中添加测试元素div:

<div class="demo-less">less demo</div>

在 src/main.js 中引入上面两个样式文件：

import './style/less/less-demo.less'

3.2 安装依赖

处理 less 文件，需要使用到 less-loader、css-loader 和 style-loader。less-loader 用于将 less 文件编译为 css 文件，编译后的 css 文件依次经过 css-loader 和 style-loader 处理，最后通过style标签插入到HTML中。less-loader 依赖于 less。

yarn add less less-loader -D

3.3 配置 less 相关loader

在rules中配置了针对 less 文件的 loader:

  module: {
    rules: [
      ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ]
      }
    ]
  },

TODO 添加一个图

3.4 打包测试运行

先执行 yarn build 打包，打包成功后在浏览器中查看：

4 处理 stylus 资源

stylus 的语法更加简洁，除了省略花括号和分号，连冒号也省略了。但是要严格注意缩进。

4.1 编写 stylus 代码

在 src/style 目录下创建目录 stylus，并在 stylus 中创建样式文件stylus-demo.styl：

.demo-stylus
  width 300px
  height 80px
  background yellow

在 template/index.html 中添加测试元素div:

<div class="demo-stylus">stylus demo</div>

在 src/main.js 中引入上面两个样式文件：

import './style/stylus/stylus-demo.styl'

4.2 安装依赖

处理 stylus 文件，需要使用到 stylus-loader、css-loader 和 style-loader。stylus-loader 用于将 styl文件编译为 css 文件，编译后的 css 文件依次经过 css-loader 和 style-loader 处理，最后通过style标签插入到HTML中。stylus-loader 依赖于 stylus。

yarn add stylus stylus-loader -D

4.3 配置 stylus 相关loader

在rules中配置了针对 less 文件的 loader:

  module: {
    rules: [
      ...
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },

TODO 添加一个图

4.4 打包测试运行

先执行 yarn build 打包，打包成功后在浏览器中查看：

今日优雅哥（youyacoder）学习结束，期待关注留言分享~~