兩次使用同一個函式庫時隔離微前端中的 CSS

Question

我有幾個微前端反應應用程式。 所有應用程式均與技術無關。這意味著任何應用程式都可以有任何程式庫作為依賴項。 他們正在使用 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 變數等）。我認為這是一個錯誤的方法。

Answer 1

簽出 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 中最頂部的元素。

優點

• 易於實現，也適用於巢狀 CSS 規則。
• 無需擔心根（即 html、body）元素的前綴問題 由 prefixRootTags 參數負責。預設情況下，該選項是 設定為 false，表示根元素不會加前綴， 但將替換為提供的#mfe_id_。

缺點

• 需要使用 PostCSS。