面试题：Webpack中如何配置处理CSS样式表？

使用的loader
- css - loader：用于将CSS文件转化为JavaScript模块，它会解析CSS文件中的@import和url()等语句，并将相关的CSS文件引入。
- style - loader：将CSS通过<style>标签注入到HTML页面的<head>标签中，从而使样式能够应用到页面上。
- postcss - loader（可选但推荐）：用于对CSS进行后处理，比如自动添加浏览器前缀等。
基本配置步骤
- 安装loader：在项目根目录下运行以下命令安装所需的loader。

npm install css - loader style - loader postcss - loader autoprefixer --save - dev

配置Webpack：在Webpack的配置文件（通常是webpack.config.js）中添加如下配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style - loader",
                    "css - loader",
                    {
                        loader: "postcss - loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "autoprefixer"
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    }
};

上述配置中，test指定了处理.css文件，use数组中按照从右到左（从下到上在Webpack 5+ ）的顺序依次使用postcss - loader、css - loader和style - loader。postcss - loader通过autoprefixer插件自动为CSS添加浏览器前缀，css - loader解析CSS文件，style - loader将样式注入到页面。

在JavaScript中引入CSS：在项目的JavaScript文件（如入口文件main.js）中引入CSS文件，例如：

import './styles.css';

这样，Webpack在打包时会处理CSS样式，并将其正确应用到页面上。

星途面试题库

面试题：Webpack中如何配置处理CSS样式表？

知识考点

面试题答案