面试题：Webpack 样式表模块化处理之中等难度：如何在Webpack中实现CSS模块化并解决样式冲突

Question

在Webpack项目里，介绍一下如何配置实现CSS模块化，使得每个组件的样式只在该组件内部生效，避免全局样式冲突。请简要描述配置步骤并举例说明在React组件中如何引入和使用模块化的CSS。

Answer 1

1. Webpack配置实现CSS模块化步骤：
   • 安装相关loader：
     • 首先确保安装了css - loader和style - loader，如果使用scss等预处理器，还需要安装对应的sass - loader、node - sass等。
     • 示例：npm install css - loader style - loader --save - dev（如果使用scss：npm install sass - loader node - sass --save - dev）。
   • 配置Webpack：
     • 在webpack.config.js中，找到module.rules数组，添加如下配置：

module.exports = {
    //...其他配置
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style - loader",
                    {
                        loader: "css - loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};

 - 如果使用`scss`，配置如下：

module.exports = {
    //...其他配置
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style - loader",
                    {
                        loader: "css - loader",
                        options: {
                            modules: true
                        }
                    },
                    "sass - loader"
                ]
            }
        ]
    }
};

2. 在React组件中引入和使用模块化CSS：
   • 创建CSS文件：例如创建Button.module.css文件，编写如下样式：

.button {
    background - color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border - radius: 5px;
}

• 在React组件中引入和使用：在Button.js组件中：

import React from'react';
import styles from './Button.module.css';

const Button = () => {
    return <button className={styles.button}>点击我</button>;
};

export default Button;

这样每个组件的CSS样式就只在该组件内部生效，避免了全局样式冲突。