程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享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）学习结束，期待关注留言分享~~
