面试题：CSS Modules在复杂项目中的样式隔离与复用策略

Question

在一个具有多个页面和组件的复杂前端项目里，使用CSS Modules实现样式隔离的同时，又要考虑部分样式的复用。请阐述具体的实现思路，如何避免不同组件间样式冲突，并且有效复用通用样式，同时说明在Webpack配置方面可能需要做出哪些额外调整。

Answer 1

实现思路

1. 样式隔离：
   • 使用CSS Modules，每个组件的CSS文件会被编译成一个包含唯一类名的模块。例如，在React项目中，假设我们有一个Button.js组件，对应的Button.module.css文件。

   /* Button.module.css */
   

.button { background - color: blue; color: white; }

```jsx
// Button.js
import React from'react';
import styles from './Button.module.css';
const Button = () => {
    return <button className={styles.button}>Click me</button>;
};
export default Button;

• 这样每个组件的样式类名在全局都是唯一的，避免了不同组件间样式的冲突。

2. 样式复用：
   • 提取公共样式文件：创建一个单独的CSS文件，如common.css，用于存放通用样式。例如：

   /* common.css */
   

.text - align - center { text - align: center; } .margin - top - 10 { margin - top: 10px; }

- **在组件中引入公共样式**：在需要复用这些样式的组件的CSS Modules文件中引入公共样式文件。例如在`Card.module.css`中：
```css
/* Card.module.css */
@import './common.css';
.card {
   border: 1px solid gray;
   padding: 10px;
   @apply.text - align - center;
   @apply.margin - top - 10;
}

• 使用工具库辅助：可以使用如postcss - apply插件，它允许在CSS Modules中使用@apply语法来复用公共样式。

避免样式冲突

1. CSS Modules类名唯一性：由于CSS Modules编译后生成的类名是基于文件名、类名和哈希值的组合，保证了在全局的唯一性。即使不同组件中有相同的类名，实际渲染到页面上的类名也是不同的，从而避免了冲突。
2. 作用域限制：每个组件的样式只在该组件内部生效，不会影响到其他组件。例如，Button.module.css中的样式不会对Card.module.css中的组件产生影响。

Webpack配置调整

1. CSS - Loader配置：确保Webpack配置中使用了css - loader，并且配置了modules选项来启用CSS Modules。例如：

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

2. PostCSS配置：如果使用postcss - apply等插件来辅助样式复用，需要在Webpack配置中添加postcss - loader，并配置相应的PostCSS插件。例如：

   module.exports = {
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [
                      'style - loader',
                       {
                           loader: 'css - loader',
                           options: {
                               modules: true
                           }
                       },
                       {
                           loader: 'postcss - loader',
                           options: {
                               plugins: () => [
                                   require('postcss - apply')()
                               ]
                           }
                       }
                   ]
               }
           ]
       }
   };