Angular CLI プロジェクトでグローバル CSS をどう管理するか
Angular CLI から生成したプロジェクトを使うと、グローバルな CSS の読み込み箇所が大きく2箇所ある。一つは styles.scss で、もう一つは .angular-cli.json の中の styles プロパティで適用する方法だ。index.html に link 要素を増やす方法は今回避けようと思う。
で、グローバル CSS の読み込みに .angular-cli.json と styles.scss のどちらを使うべきか、を考えたいと思う。
目次
.angular-cli.json を使った場合
.angular-cli.json の styles に CSS ファイルを追加した場合。
公式でも「link 要素で各 CSS ファイルを追加した時と全く同じようにロードする」と説明があるとおり、別ファイルとして扱うところに特徴がある。
stylesの配列に記述した順に出力 (カスケード) されることになる。ng serve時は CSS ファイルごとにstyle要素が挿入される。ng build時はstyles.bundle.jsにて CSS ファイル別に管理される。ファイルとしては1つなのでリクエスト量や読込速度に大きな影響はなさそう。- Lazy Load が可能。
{ "input": "lazy-style.scss", "lazy": true }のように書くと設定できる。 - 何らかの理由で Angular CLI によるビルドを使わなくなった場合に、ビルド設定をやり直す必要が出てくる。
styles.scss を使った場合
styles.scss 内に定義したり、@impoort で読み込んだ場合。
- SASS を読み込む場合、
styles.scss内で変数の上書きなどカスタマイズが可能 (Bootstrap-Sass の Glyphicon のファイルパスなど、この修正が必須のモノもある)。 - ビルド後は1つの大きな
styles.cssを読み込む状態になる。 .angular-cli.jsonを利用しない場合、グローバル CSS は全てstyles.scssにまとまるので見通しが良い。
総評
どちらも、画面上で得られる結果 (見た目) は同じ。また、どちらもカスケードの順序を気にして記述する必要はある。
Bootstrap-Sass や Font-Awesome などを使っていると、styles.scss で @import した上で SASS 変数を上書き編集しておく必要があり、.angular-cli.json への記述を併用するとなると、グローバルスタイルの定義が2箇所に散らばることになる。
であれば、styles.scss への記述で一本化した方が保守性も高いと考える。Lazy Load を行いたいなど、.angular-cli.json に記述する必要が出てくるまでは利用しない方が良いであろう。