この記事では、CSSのようなJSモジュールをインポートする方法を説明します。

序文

リリースされたばかりの Chrome 93 バージョンには、JavaScript モジュールをインポートするのと同じように CSS スタイルを読み込むことができる、CSS モジュールスクリプトという魅力的な新機能が追加されました。

その後、Constructable Stylesheet と同じ方法で CSS スタイルをドキュメントと Shadow DOM に適用できます。これは、CSS をロードする他の方法よりも便利で効率的です。

構築可能なスタイルシートとは何ですか?

CSS モジュールスクリプトを理解する前に、まず構築可能なスタイルシートとは何かを理解しましょう。名前の通り、CssStyleSheet で直接構築できるように設計されており、ドキュメント DOM と Shadow DOM の両方で使用できます。

構築可能なスタイルシートの使用:

new CSSStyleSheet() でスタイルシートを構築する
設定可能なスタイルシートの変更
adoptedStyleSheets による構築可能なスタイルシートの使用

構築可能なスタイルシートを変更するための API は次のとおりです。

insertRule(rule, index)はcssRules属性にルールを挿入します。
deleteRule(rule, index) cssRulesプロパティからルールを削除します
replace(text)はcssRulesを非同期に置き換えます
replaceSync(text) 同期置換

// CSSStyleSheetを構築します
const スタイルシート = 新しい CSSStyleSheet();
 
// CSSを追加
stylesheet.replaceSync('本文 { 背景: #000 !重要; }')
// または stylesheet.replace は代わりに Promise を返します
 
// ドキュメントに新しいスタイルシートを採用するように指示します。
// これは Shadow Roots でも機能することに注意してください。
document.adoptedStyleSheets = [...document.adoptedStyleSheets、スタイルシート];

CSSモジュールスクリプトの使用

CSS モジュールスクリプトを導入すると、次のようにドキュメントとシャドウ DOM に対して動作します。

'./styles.css' からシートをインポートします。 assert { type: 'css' };
document.adoptedStyleSheets = [シート];
shadowRoot.adoptedStyleSheets = [シート];

CSS モジュールスクリプトのデフォルトのエクスポートは構築可能なスタイルシートであり、他の構築可能なスタイルシートと同様に、adoptedstylesheet を使用してドキュメントと Shadow DOM に作用します。

JavaScript を使用して CSS を組み込む他の方法とは異なり、<script> タグを作成する必要はなく、難読化された JavaScript に CSS を挿入する必要もありません。

CSS モジュールにも JavaScript モジュールと同じ利点があります。

重複排除: アプリ内の複数の場所から同じ CSS ファイルをインポートする場合でも、取得、インスタンス化、解析は 1 回だけ行われます。
一貫した順序: JavaScript ランタイムをインポートする場合、すでに解析されているスタイルシートに依存する可能性があります。
セキュリティ: モジュールは CORS を使用して読み込まれ、厳密な MIME タイプチェックが使用されます。

インポートアサーションとは何ですか?

import ステートメントの assert {type: 'css'} 部分は必須のインポートアサーションです。これがないと、CSS は通常の JavaScript モジュールと見なされ、インポートされたファイルに JavaScript 以外の MIME タイプがある場合はインポートに失敗します。

import sheet from './styles.css'; // モジュール スクリプトの読み込みに失敗しました:
                                  // JavaScript モジュールが必要です
                                  // スクリプトですがサーバーが応答しました
                                  // MIME タイプが "text/css" の場合。

スタイルシートの動的インポート

JavaScript モジュールの動的インポートと同様に、動的インポートを使用して CSS モジュールをインポートすることもできます。

const cssModule = インポートを待機します('./style.css', {
  アサート: { タイプ: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

ここで注意すべき落とし穴があります。 adoptedstylesheet に追加されるのは cssModule 自体ではなく、 cssModule.default です。

@importルールはまだサポートされていません

現在、CSS @import のルールは、CSS モジュールスクリプトを含む構築可能なスタイルシートには適用されません。 CSS モジュールに @import ルールが含まれている場合、それらは無視されます。

/* atImported.css */
div {
    背景色: 青;
}

/* スタイル.css */
@import url('./atImported.css'); /* CSS モジュールでは無視されます */
div {
    境界線: 1em 緑
}

<!-- index.html -->
<スクリプトタイプ="モジュール">
    './styles.css' からスタイルをインポートします。 assert { type: "css" };
    document.adoptedStyleSheets = [スタイル];
</スクリプト>
<div>この div には緑の境界線がありますが、背景色はありません。</div>

現在、FirefoxとSafariブラウザはサポートされていませんが、将来的には期待できます〜

要約する

JS モジュールのインポートなど、CSS のインポート方法についての記事はこれで終わりです。JS モジュールのインポートや CSS のインポートなど、関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: