我有幾個微前端反應應用程式。 所有應用程式均與技術無關。這意味著任何應用程式都可以有任何程式庫作為依賴項。 他們正在使用 webpack 模組聯合插件。如果其他微前端應用程式的版本相同，則依賴項將被共用。
微前端應用程式分為幾組：主微前端應用程式和子微前端應用程式。 主應用程式是其他子應用程式的容器。一次只能運行一個子應用程式。
我們公司有帶有反應元件的 UI-Kit。庫包括 CSS 變數、全域選擇器 (* {/* CSS 規則 */})。
子應用程式可以將我們的 UI-Kit 作為依賴項。如果 UI-Kit 的版本不同，子應用程式之一可能會套用錯誤的樣式。 工作流程（工作原理）：我在瀏覽器中打開主應用程序，webpack 加載主應用程式第一頁的所有資源（JS、CSS、字體）。之後，我使用 Sub app 1 開啟頁面，webpack 會載入 Sub app 1 的資源並將其插入文件中（CSS 樣式將插入到文件的頭部）。 我們的 UI-kit 有 CSS 模組，但這還不夠，因為類別的名稱不是根據 CSS 規則的內容創建的。此外，CSS 變數可能會在其中一個版本中發生變更。此外，子應用程式可能不會使用我們的 UI-Kit，但 UI-Kit 中的所有 * CSS 規則都將應用於該子應用程式。此外，兩個子應用程式可以使用不同版本的相同程式庫，並且該庫可以使用全域或模組CSS。
我需要為每個微前端應用程式應用完整的 CSS 隔離。
上次我嘗試應用支援完全CSS隔離的shadow DOM。但函式庫之一（cytoscapejs 或其外掛程式）呼叫 document.getElementById 方法。它會傳回 null，因為它正在尋找的元素已在影子根中。我正在調查此案。
在此之前，我曾考慮在 UI-Kit 的 CSS 模組類別結尾新增一個版本。但它不會使 CSS 變數的名稱變得唯一。 此外，我認為我無法從我的微前端應用程式建置中重命名外部庫的 CSS 類別。
此外，我知道樣式載入器可以允許使用“use”和“unuse”方法新增和刪除樣式標籤。我可以用它來防止覆蓋兩個子應用程式的樣式。但mini-css-extract-plugin沒有這個功能。
我可以嘗試使用 :has 和 :not 選擇器，但我不想處理許多不同的 CSS 情況（* 選擇器、css 變數等）。我認為這是一個錯誤的方法。
P粉9044059412024-01-02 00:35:28
簽出 PostCss Prefix Wrap 外掛程式，它將選擇器新增到 CSS 前面樣式有助於防止 CSS 從一個微前端洩漏到另一個微前端。
為了使用插件，請安裝它並擴展您的 webpack.config，如下所示：
const PrefixWrap = require('postcss-prefixwrap')
...
...
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: {
plugins: [
PrefixWrap('#mfe_id_<appname>', {
nested: '&',
})],
},
},
}
請遵守 #mfe_id_ 命名並將相同的 ID 加到 MFE 中最頂部的元素。
優點
缺點