meta.load-css の利用方法¶

Sassの meta.load-css の利用方法と制限について説明します。

概要¶

@include meta.load-css( … ); は、他のファイルをそのファイルにインライン展開するためのSass公式の機能です。(参照)

ファイルの先頭で、Sassのビルトインモジュールの sass:meta を @use で読み込むことで利用可能になります。

meta.load-css を記述することで、@import のように、CSSもしくはSCSSファイルのコードを取り込めます。

@layer とファイル取り込みの併用¶

meta.load-css は、@use と異なり、@layer <layer-name> {} の内部に記述してもコンパイルエラーになりません。

@use "sass:meta";

/* 以下はコンパイルエラーにならない */
@layer pages {
    @include meta.load-css(" … ");
}

meta.load-css 利用の注意点¶

meta.load-css によるCSSの出力挙動は @use と異なります。
具体的には以下の2つです。

1・Sass公開メンバーについて¶

1は、例えば _module.scss を page.scss から読み込んだとします。
@use の場合は、 _module.scss のSass変数を page.scss でも利用できますが、meta.load-css の場合は利用できません。
ただし、$with で変数の注入は可能です。（後述）

2・CSSの重複出力について¶

2は、 @use は、同じエントリファイル内で複数回呼び出してもコンパイル後のCSSは重複しません（当然、同じ名前空間で重複指定するとエラーになります）が、meta.load-css() は、呼び出されるたびに同じCSSを出力します。
これは、 meta.load-css は、一般的な include のように、「書いたらそこに出力」する機能であるためです。

$with !default の利用¶

meta.load-css を利用した場合、Sassの公開メンバーは利用できませんが、読み込むSCSSファイルに、!default が指定されている変数があれば、$with 引数を使用して設定値を注入できます。

@use "sass:meta";

@layer vendor {
  /* .scss の !default には $with 利用可 */
  @include meta.load-css("some-lib/index", $with: (
    "primary-color": #1450ff,
    "radius": 6px
  ));
}

CSSファイルの取り込み¶

取り込み対象のファイルがプレーンなCSSの場合も、meta.load-css が利用できます。

@use "sass:meta";

@layer pages {
    // インポートするCSSファイルのパス
    @include meta.load-css(" … ");
}

// ページ用のスタイルや上書き用CSSを記述
@layer pages {
    …
}

外部で作られたプラグイン付属のCSS（npm管理のCSSなど）を取り込みながら、 @layer でラップしてレイヤーに所属させる。といった使い方ができます。