Angular2
angular-cli

SCSS with Angular-cli

More than 1 year has passed since last update.


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

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



ありがとうございました