こんにちは、ForSchool事業部の石上です。 あるSPAを作る際、CSSを書きやすくするためにいくつかWebpackの設定を書きました。 今回は、これらの設定がなぜ今こうなっているのかを社内のメンバーに説明するつもりで、どれが何のために必要な設定なのかを書いてみます。 背景 ウェブフロントエンド全般に言えることですが、CSS周りにもツールや設定方法はたくさんあります。一から用意する際は、毎回何を選んでどうすればいいのか悩んでしまいます。そこで今回のプロジェクトに使う設定をやりたいことベースで整理したところ、以下のような要件となりました。 配信するときは1ファイルで、なるべくサイズを小さくしたい コンポーネントごとにスタイルを閉じたいけど、BEMは面倒 デザイナーさんに用意してもらった変数を一箇所で管理したい ベンダープレフィックスを自動でつけてほしい 設定 MiniCssExtract