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 選項來實現。
