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