Corredor

ウェブ、プログラミングの勉強メモ。

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 の配列に記述した順に出力 (カスケード) されることになる。
  • 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 に記述する必要が出てくるまでは利用しない方が良いであろう。

参考