@import

定義

@import は、CSS ファイルの中から別のスタイルシートを読み込むアットルールである。@import "base.css"; のように URL を書き、メディアクエリや supports()、layer() を続けると条件付きの読み込みやカスケードレイヤーへの割り当てもできる。

詳細

CSS の @import は、スタイルシートの先頭、@charset と @layer 宣言以外のどのルールよりも前に書く必要がある。
後ろに書いた @import は無効になり、ブラウザに無視される。

ビルドツールを通す場合、@import の扱いはツールごとに変わる。PostCSS は既定では @import を展開しないので、読み込み先を 1 ファイルにまとめるには postcss-import をプラグイン配列の先頭に置く。Tailwind CSS v4 では、v3 の 3 つの @tailwind ディレクティブの代わりに @import "tailwindcss"; と書く。

よくある誤解

• Sass の @import と同じもの: Sass の @import は Sass ファイルを読み込んで変数や mixin も共有する独自の機能で、Dart Sass 1.80.0 で非推奨になり、3.0.0 で削除される予定である。
  移行先は @use である。
  拡張子が .css のものや url() で書いたものは、Sass も通常の CSS の @import として出力する。
• 途中に書いても効く: 他のルールより後ろの @import は無視される。PostCSS で @import が展開されない 原因の 1 つである。

関連

JavaScript 側のモジュール読み込みは ESM の import 文で、CSS の @import とは仕組みが異なる。