使用 CSS 模組指令碼匯入樣式表

瞭解如何使用與 JavaScript 模組相同的語法使用 CSS 模組指令碼匯入 CSS 樣式表。

丹克拉克
Dan Clark
X GitHub

透過新的 CSS 模組指令碼功能，您可以使用 import 陳述式載入 CSS 樣式表，就像 JavaScript 模組一樣。接著，樣式表可以套用至文件或陰影根，方法與可建構的樣式表相同。比其他匯入及套用 CSS 的方式更容易，且效能更佳。

瀏覽器支援

在 Chrome 和 Edge 第 93 版中，系統預設會提供 CSS 模組指令碼。

目前尚未支援 Firefox 和 Safari。如要追蹤實作進度，分別位於 Gecko 錯誤和 WebKit 錯誤中。

必備條件

使用 CSS 模組指令碼

匯入 CSS 模組指令碼，並套用至文件或陰影根目錄，如下所示：

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

CSS 模組指令碼的預設匯出項目是可建構的樣式表，其內容就是匯入檔案的內容。如同任何其他可建構的樣式表，運用 adoptedStyleSheets 會套用至文件或陰影根層級。

與其他從 JavaScript 套用 CSS 的方法不同，您不需要建立 <style> 元素或包含 CSS 文字 JavaScript 字串的音效。

CSS 模組和 JavaScript 模組也有幾項優點。

  • 簡化：如果從應用程式的多個位置匯入同一個 CSS 檔案，則仍只會擷取、例項化和剖析一次。
  • 評估順序一致：執行匯入 JavaScript 時，可參考已擷取和剖析的樣式表。
  • 安全性：系統會使用 CORS 擷取模組，並使用嚴格的 MIME 類型檢查。

匯入斷言 (「assert」有哪些內容？)

import 陳述式的 assert { type: 'css' } 部分是匯入斷言。這是必要項目，如果沒有，系統會將 import 視為一般 JavaScript 模組匯入，但如果匯入的檔案包含非 JavaScript MIME 類型，就會失敗。

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

動態匯入的樣式表

您也可以使用動態匯入匯入 CSS 模組，並加入 type: 'css' 匯入斷言的新第二個參數：

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

@import 則不允許使用規則

目前 CSS @import 規則不適用於可建構的樣式表，包括 CSS 模組指令碼。如果可建構的樣式表中有 @import 規則，系統會忽略這些規則。

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

規格可能會新增 CSS 模組指令碼中的 @import 支援功能。您可以前往 GitHub 問題追蹤這項規格討論。