Webpack 5 项目添加 CSS 打包支持

最近半个月的时间一直在使用 React 重写一个内部进销存系统的前端页面功能。在脱离了 Laravel 框架的前提下，前端的很多基础配置都需要自己来解决。这其中就包括 CSS 代码的打包。

半个月前开始调研使用 React 的时候，我已经实现了基于 React router 的项目框架，包括登录认证。其中的过程我都整理成了如下的三篇文章：

如果你还不了解 React，相信这些文章应该能给你带来一些参考和帮助。不过这三篇文章的主要目的是验证 React 是否能够满足我的喜好，并投入到实际的项目中，所以少了前端样式方面的配置。今天这篇算是一个补充和完善。

作为以上三篇文章的番外篇，本文依然还是延续之前的项目目录和结构，对于这方面不是很清楚的朋友建议先翻阅一下以上文章。

让我们开始。

添加 CSS 支持

首先是给项目添加纯 CSS 代码的打包支持。同样是使用 yarn 命令来安装依赖包：

yarn add css-loader style-loader

然后在 webpack.config.js 文件中补充 CSS 相关的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 8000,
        hot: true
    },
    entry: './src/main.js',
    output: {
        filename: '[name].[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        })
    ]
}

上面的配置中，添加代码就是 module > rules 节点下，内容包含 test: /\.css$/ 的这部分。现在就可以在项目的 src/ 目录下创建一个 CSS 文件，然后在 src/main.js 文件中用 import 引用这个 CSS 文件，就能在项目中使用 CSS 样式功能了。

// ...
import './main.css';
// ...

不过这样输出的 CSS 代码是包含在 style 这个 HTML 标签里面的。如果希望 CSS 能输出到一个文件，还需要做一些配置上的调整。

输出 CSS 文件

还是使用 yarn 命令安装一个扩展包：

yarn add mini-css-extract-plugin

然后打开 webpack.config.js 文件，引入新安装的 mini-css-extract-plugin 扩展包，并修改 CSS 的 Rule 配置，完成后的代码如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 8000,

    },
    entry: './src/main.js',
    output: {
        filename: '[name].[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        })
    ]
}

再次重新打包，CSS 代码就输出到单独的文件了。

单从使用 CSS 的目的来说，目前这样就算是完成了项目对 CSS 打包功能的支持。不过如果你和我一样，早已习惯了使用 SASS 来写样式代码，那添加一下 SASS 代码的转译支持也是很有必要的。

添加 SASS 转译支持

同样先引入 SASS 功能依赖的扩展包：

yarn add sass-loader sass

然后再次修改 webpack.config.js 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 8000,
        hot: true
    },
    entry: './src/main.js',
    output: {
        filename: '[name].[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(c|sc|sa)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        })
    ]
}

这次的调整主要就是 CSS 的 Rule 部分。一是 test 文件名匹配部分把 scss 和 sass 也包含了进来；二是在 use 节点添加了 sass-loader。

现在算是真正完成了项目对 CSS 样式的支持。在实际使用时有一个值得注意的关键点，来看看下面这两句 CSS 代码：

@import url('./head.scss');
@import './head.scss';

知道它俩有什么区别吗？

答案就是第一行是 CSS 引入其他文件的语法，如果这样引入一个包含 SASS 格式的文件，里面 SASS 格式的样式代码不会被 Webpack 转译，所以一定要使用最第二行的写法。我就是因为没注意这个细节，结果掉坑里了，导致花费了个把钟头的时间去反复测试 Webpack 的配置项。

最后，目前半个月的 React 使用体验让我感觉非常棒。和 Vue.js 给我的体验相比属于是接触另外一种全新的理念。我也很享受这种理念带来的开发体验，也许等这次项目重写完成后，我会分享一下自己使用 React 开发的感受。如果你还没尝试过 React，我十分建议你体验一下。

Webpack 5 项目添加 CSS 打包支持

添加 CSS 支持

输出 CSS 文件

添加 SASS 转译支持

上一篇

下一篇