使用 Webpack 5 中的 CSS Loader

在 Webpack 5 中，css-loader 仍然是处理 CSS 文件的重要加载器。它能够帮助我们将所有 CSS 导入（ @import ）和 URL 引用（ url()）解析为 Webpack 可以识别的模块，并将其打包成单独的 CSS 文件。

安装

首先需要安装 css-loader。

npm install --save-dev css-loader

安装完毕后，在 Webpack 配置文件中使用 css-loader。

配置

假设在 src/styles/index.css 文件中定义了一些样式：

/* index.css */

body {
    font-family: sans-serif;
}

h1, h2, h3 {
    font-weight: bold;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    background: #007bff;
    color: white;
    cursor: pointer;
}

在 Webpack 配置文件中，通过 module 关键字来配置加载器：

// webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

这段代码告诉 Webpack，在遇到以 .css 结尾的模块时，先应用 css-loader 解析该模块并返回 CSS 代码，再将代码传递给 style-loader 生成 style 标签并将其添加到 HTML 页面中。

这样配置后，我们可以在项目中导入该 CSS 文件：

// app.js

import './styles/index.css';

Options

css-loader 支持一些选项。

例如，我们可以通过 modules 选项来启用模块化 CSS：

// webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
        ],
    },
};

这样，在 index.css 中定义的类名将被转换为唯一的 CSS 类名，以避免全局 CSS 类名冲突：

/* styles/index.css */

.btn {
    /* 生成的唯一类名 */
    com_example_styles_index_btn_1tnBs {
        display: inline-block;
        padding: 0.5rem 1.5rem;
        border-radius: 0.25rem;
        background: #007bff;
        color: white;
        cursor: pointer;
    }
}

还可以使用 importLoaders 选项来加载 @import 引用的 CSS 文件：

// webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                        },
                    },
                    'postcss-loader',
                ],
            },
        ],
    },
};

这样配置后，我们就可以在项目中导入 @import 样式：

/* styles/index.css */

@import './common.css';

.btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    background: #007bff;
    color: white;
    cursor: pointer;
}

总结

css-loader 是 Webpack 中非常重要的加载器，它能够将所有 CSS 导入和 URL 引用解析为 Webpack 可以识别的模块，并将其打包成单独的 CSS 文件。在 Webpack 配置文件中通过 module 关键字来配置加载器，还可以通过各种选项来自定义加载器的行为。