微前端架构 之 应用之间样式隔离 （四）

1. 使用 CSS Modules 进行样式隔离

1. 安装必要的依赖
如果你使用 webpack 作为构建工具，你可能需要安装 css-loader 和 style-loader。如果你的项目使用 Create React App 或其他现代前端框架，这些可能已经内置了。

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

2. 编写 CSS Modules 样式
在微前端应用的MyComponent.module.css文件中：

/* MyComponent.module.css */  
.root {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  height: 100px;  
  background-color: #f0f0f0;  
}  
  
.button {  
  padding: 10px 20px;  
  background-color: #007bff;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}

3. 在 React 组件中使用 CSS Modules
使用 styles.root 和 styles.button 而不是直接使用字符串 ‘root’ 和 ‘button’ 作为类名。CSS Modules 会自动为这些类名添加唯一的哈希值，以确保它们在每个微前端应用中都是唯一的。

// MyComponent.js  
import React from 'react';  
import styles from './MyComponent.module.css'; // 导入 CSS Modules  
  
const MyComponent = () => (  
  <div className={styles.root}>  
    <button className={styles.button}>Click Me</button>  
  </div>  
);  
  
export default MyComponent;

4. 配置 webpack（如果需要）

// webpack.config.js  
module.exports = {  
  // ...  
  module: {  
    rules: [  
      // ...  
      {  
        test: /\.css$/,  
        use: [  
          'style-loader',  
          {  
            loader: 'css-loader',  
            options: {  
              modules: true, // 启用 CSS Modules  
              // 可以添加其他选项，如 localIdentName、camelCase 等  
            },  
          },  
        ],  
      },  
      // ...  
    ],  
  },  
  // ...  
};

在主应用中，你可以像平常一样加载微前端应用。由于每个微前端应用都使用 CSS Modules 进行样式隔离，因此它们之间的样式不会相互干扰。

2. 使用 CSS 命名空间进行样式隔离

为每个应用定义一个唯一的命名空间。这可以通过在 CSS 选择器前添加特定的前缀来实现。
app-a 的 CSS

/* app-a.css */  
.app-a-root {  
  /* 应用 A 的根样式 */  
}  
  
.app-a-root .button {  
  /* 应用 A 的按钮样式 */  
}

app-b 的 CSS

/* app-b.css */  
.app-b-root {  
  /* 应用 B 的根样式 */  
}  
  
.app-b-root .button {  
  /* 应用 B 的按钮样式 */  
}

在应用中应用命名空间
app-a 的 HTML

//在实际应用中，你可能不需要在类名中重复根命名空间（如 .app-a-root-button）
<div class="app-a-root">  
  <button class="app-a-root-button">点击我（应用 A）</button>  
</div>

加载和隔离 CSS

最后，确保每个应用的 CSS 只在其自己的作用域内加载和应用。这可以通过在微前端框架中实现特定的加载和卸载逻辑来实现，或者通过使用
Webpack 的 css-loader 和 style-loader（或类似的工具）的 modules 选项来实现。