About
- @nksm
- 株式会社Emotion Tech
- フロントエンドエンジニア
- Angular でウェブアプリケーションを開発中
概要
Angular-cli を利用したプロジェクトの
CSS 書き方
サンプルディレクトリ構成
angular-cli で作られるプロジェクトサンプル
project
├ angular-cli.json
├ package.json
├ node_modules
├ src
│ ├ index.html
│ ├ assets
│ │ ├ styles
│ │ │ └ ・・・
│ │ └ ・・・
│ ├ app
│ │ ├ styles.scss
│ │ ├ foo
│ │ │ ├ foo.component.html
│ │ │ ├ foo.component.scss
│ │ │ ├ foo.component.spec.ts
│ │ │ └ foo.component.ts
│ │ ├・・・
今日の構成
- Angular
- Angular 2.4.5
- ビルドツール
- Angular-cli 1.0.0-beta.26
- CSS
- Sass（node-sass 3.4.2）
Angular 2 の CSS のカプセル化
- Angular 2 では、コンポーネントごとに CSS がカプセル化される
- コンポーネントで定義した CSS は他のコンポーネントに影響しない
- 親のコンポーネントで定義した CSS は子に継承されない
- なんで CSS すぐ死んでしまうん みたいなことが起きづらい
CSS 読み込み方法あれこれ
コンポーネントで完結する CSS
styleUrls に利用する SCSS をパスを記述する
foo.component.ts
@Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.scss'],
})
export class FooComponent implements OnInit {}
アプリケーション全体で利用する CSS
angular-cli.json の styles に記述する
angular-cli.json
{
"apps": [
{
"styles": [
"styles.scss"
]
}
]
}
ルートの component で読み込まない理由
- ルートの component だけの CSS になってしまう
- component で利用している component には継承しない
- reset.css / normalize.css など利用している場合困る
CSS フレームワークの読み込み
angular-cli.json の styles に記述する
angular-cli.json
{
"apps": [
{
"styles": [
"../node_modules/normalize.css/normalize.css",
"styles.scss"
]
}
]
}
style.scss に記述した SCSS で import
angular-cli を利用しない場合等はこちら。
今のプロジェクトではこちらを採用している。
styles.scss
// modules
@import '../node_modules/normalize.css/normalize.css';
コンポーネントにするまでもない共通のコンポーネント
- コンポーネントするか迷っている段階
- とりあえず HTML と CSS だけでいい
利用する各コンポーネントで読み込む
foo.component.ts
@Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: [
'./foo.component.scss',
'./../../assets/styles/_bar_component.scss',
],
})
export class FooComponent implements OnInit {}
気をつけること
- 各コンポーネントで SCSS を読み込むほど全体の CSS が肥大化
- AoT 対応すれば気にしなくてもいいかも
styles.scss に import
styles.scss
// shared component styles
@import 'assets/styles/bar_component’;
気をつけること
- 当然スコープが効かない
- BEM 等での設計しておく必要がある
散在する SCSS に共通の変数などの読み込み
各コンポーネントで利用する SCSS に共通の変数など読み込みたい場合
ディレクトリ構成
project
├ src
│ ├ assets
│ │ ├ styles
│ │ │ ├ _variables.scss // 変数
│ │ │ ├ _mixins.scss // ミックスイン
│ │ │ ├ _extends.scss // extend
│ │ │ ├ _import.scss // 読み込み用
│ │ │ └ ・・・
│ ├ app
│ │ ├ style.scss
│ │ ├ foo
│ │ │ ├ foo.component.scss
│ │ ├・・・
import 用の SCSS を作る
import.scss
@import './variables';
@import './extends';
@import './mixins';
各コンポーネントの SCSS で読み込む
foo.component.scss
// import common setting
@import './../../assets/styles/import';
まとめ
- SCSS を選ぶと選択の幅が広がるので SCSS を利用しよう
- Angular のカプセル化の仕組みを理解しておこう
- 利用用途によっていろいろな方法があるので柔軟に選ぼう
参考
Angular で BEM を書いた場合の記事があったので紹介。
個人的にはあんまりですが...