Angular CLI プロジェクトでグローバル CSS をどう管理するか

Angular CLI から生成したプロジェクトを使うと、グローバルな CSS の読み込み箇所が大きく2箇所ある。一つは styles.scss で、もう一つは .angular-cli.json の中の styles プロパティで適用する方法だ。index.htmllink 要素を増やす方法は今回避けようと思う。

で、グローバル CSS の読み込みに .angular-cli.jsonstyles.scss のどちらを使うべきか、を考えたいと思う。

目次

.angular-cli.json を使った場合

.angular-cli.jsonstyles に CSS ファイルを追加した場合。

公式でも「link 要素で各 CSS ファイルを追加した時と全く同じようにロードする」と説明があるとおり、別ファイルとして扱うところに特徴がある。

styles.scss を使った場合

styles.scss 内に定義したり、@impoort で読み込んだ場合。

総評

どちらも、画面上で得られる結果 (見た目) は同じ。また、どちらもカスケードの順序を気にして記述する必要はある。

Bootstrap-Sass や Font-Awesome などを使っていると、styles.scss@import した上で SASS 変数を上書き編集しておく必要があり、.angular-cli.json への記述を併用するとなると、グローバルスタイルの定義が2箇所に散らばることになる。

であれば、styles.scss への記述で一本化した方が保守性も高いと考える。Lazy Load を行いたいなど、.angular-cli.json に記述する必要が出てくるまでは利用しない方が良いであろう。

参考