SCSS with Angular-cli

# 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 すぐ死んでしまうん](http://www.slideshare.net/hayatomizuno/css-41084761) みたいなことが起きづらい

---

# 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 を書いた場合の記事があったので紹介。

 - [Using BEM (Block Element Modifier) And Emulated View Encapsulation In Angular 2.4.1](![https://www.bennadel.com/blog/3213-using-bem-block-element-modifier-and-emulated-view-encapsulation-in-angular-2-4-1.htmhttps://www.bennadel.com/blog/3213-using-bem-block-element-modifier-and-emulated-view-encapsulation-in-angular-2-4-1.htm]()
)

個人的にはあんまりですが...

---

# ありがとうございました