外部製CSSの取り込み¶

@layer の堅牢性を保つために、外部製CSSの取り込み方法について方針を検討します。

ここでは、HTTP経由（CDN）ではない、ファイルベースの取り込みについてまとめます。
CDNからの取り込みについては、 CDN利用時の注意に記載します。

概要¶

外部で作られたCSSは、おおよその場合 @layer の指定が無いことが多く、指定されていたとしても、プロジェクトが意図する名前と同じである保証はありません。

@layer は、レイヤー未定義のスタイルが最も優先順位が高くなります。
このため、いざ取り込んだ時にスタイル崩れや設計破綻を起こさないよう、どのように取り込むかについて、あらかじめ方針を定めておく必要があります。

外部製のCSSをファイルベースで取り込む方法は、次のどちらかになります。

推奨は 1 のnpm管理です。
この場合、バージョン管理やセキュリティアップデート等にも対応しやすくなります。

2は、過去のコードをそのまま引き継がなければならない場合や、CDNのCSSをコピーしてファイル配置するような場合です。

どちらの場合も、ファイルそのものをローカルファイルとして管理することに変わりはありません。

ローカルファイル管理の外部製CSSをプロジェクトに取り込む場合、ネイティブのCSS（もしくは PostCSS利用時）の場合は @import を使い、Sassの場合は @use か meta.load-css などで取り込むことになります。

このとき、必ず目的の @layer に所属させる必要があります。

具体的な記述方法については、@layerの設定をご確認ください。

@use を @layer {} でラップするとコンパイルエラーになるため、上記リンク先の説明、もしくは、meta.load-cssの利用をご確認ください。

取り込んだ外部製CSSの一部プロパティを上位レイヤーから打ち消したい場合は、revert-layer が利用できます。（revert-layer による打ち消し参照）

Globalスコープで外部製CSSを取り込む際は、以下のルールを検討します。

Pagesスコープで外部製CSSを取り込む際は、以下のルールを検討します。

上記のうち、特に @layer の指定漏れについては、CDNの利用時の課題となります。
次のページで対応方法を記載します。