面试题：CSS模块化开发中Webpack与CSS Modules整合的基础配置

Question

在一个简单的前端项目中，若要使用Webpack与CSS Modules进行CSS模块化开发，请描述Webpack配置文件中关于CSS Modules加载器（loader）的基础配置要点，以及CSS Modules如何在JavaScript中引入使用。

Answer 1

Webpack配置文件中CSS Modules加载器基础配置要点

1. 安装相关loader：
   • 需要安装css-loader和style-loader。css-loader用于处理CSS文件，style-loader用于将CSS插入到DOM中。如果项目使用了预处理器（如Sass、Less），还需安装对应的loader（如sass-loader、less-loader）以及相关依赖（如node-sass、less）。
2. 在module.rules中配置：

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

- `test`指定匹配CSS文件的规则，这里匹配所有`.css`文件。
- `use`数组中指定使用的loader，顺序是从后往前（从右往左），先使用`css-loader`处理CSS，再使用`style-loader`将其插入DOM。
- 在`css-loader`的`options`中，设置`modules: true`开启CSS Modules功能。如果使用预处理器，配置类似，例如对于Sass：

{
    test: /\.scss$/,
    use: [
       'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        },
       'sass-loader'
    ]
}

CSS Modules在JavaScript中引入使用

1. 引入方式：在JavaScript文件中，通过import语句引入CSS模块。例如有一个styles.css文件：

/* styles.css */
.container {
    background-color: lightblue;
    padding: 20px;
}

在JavaScript文件（如main.js）中引入：

import styles from './styles.css';

// 使用
const div = document.createElement('div');
div.className = styles.container;
document.body.appendChild(div);

2. 作用域：CSS Modules生成的类名是局部作用域的，避免了全局样式污染。每个引入的CSS模块都有自己独立的作用域，不同模块中相同类名不会冲突。