css-loader is 何

css-loader と style-loaderを間違えない ~css-loaderを使わずにcssを使ってみる~ | blog.ojisan.io

CSS Modules が css-loader で非推奨になるコメントの話を書いたけど、じゃあそもそも css-loader って何よ？というところ。こういう知識かなり抜けているのでだいぶ初心者的なことですが許してください。

• css-loader とは
  • JS の世界にある CSS を解決するための loader
  • JS ファイル内で読み込む CSS を文字列として JS に持ち込む => import して JS で利用したりできる
• style-loader とは
  • JS の中にある CSS の文字列を DOM に挿入する
  • つまり CSS をページに反映させるために必要

この記事によると css-loader と style-loader の公式のサンプルコードで両方同時に出てくるので両方同時に使うイメージが強いが、別に片方だけでも使えるよということらしい

このように style-loader は必ずしも css-loader と併用する必要はありません。 style-loader が JS の世界から style 文字列を DOM に style として差し込んでくれるので、style が書かれたファイルを JS の世界に読み込む何かさえこちらで用意してしまえばいいのです。

css-loader でなくても JS の世界に CSS を取り込むことができればいいので、この記事では raw-loader というものを使っている。

css-loader を使うと他の CSS を扱いやすくするための utility が付属してくるという利点はあります。 つまり style-loader さえ入れとけば、css-loader はなくても、style の適用だけならばどうにかなります。 実際のところ、CSS in JS が流行りつつあるので、もしかすると CSS ファイルをシンプルに import するだけで済むならば raw-loader で置き換えてしまっても問題ないかもしれません。

なるほどなあ。