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

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

有了新的 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 不同,您不需要使用 CSS 文字的 JavaScript 字串建立 <style> 元素或模擬資料。

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 問題追蹤此規格討論。