技術間

IT技術(主にwebとインフラ)についてメモを残していきたいと思っています

AngularCLIでSCSSを使用するには

@angular/cli 1.2.0-beta.0の記事です

angular cliで新たにangularアプリケーション(以下プロジェクト)を作成する際に、デフォルトではcssを使用する設定になっていますが、 styleオプションを指定することで別のスタイルシート言語やフレームワークを使用することができます。 この記事では主にSass(SCSS構文)を使用する方法について書いていきます。 css, sass, scssの他にもcompassなども指定できるようです。

新たにプロジェクトを作成する

通常のng newコマンドに--styleオプションを追加するだけでSCSSを使用したプロジェクトを作成できます。

ng new sample_project --style=scss

既存のプロジェクトをSCSSに変更する

–styleオプションでSCSSを指定した場合と指定しなかった場合のdiffを取りました。 以下のコマンドを行った結果で、ディレクトリ名やプロジェクト名による差分は省いています。

$ ng new css
$ ng new scss --style=scss
$ diff -r css scss
diff -r css/.angular-cli.json scss/.angular-cli.json
22c22
<         "styles.css"
---
>         "styles.scss"
54c54
<     "styleExt": "css",
---
>     "styleExt": "scss",

Only in css/src/app: app.component.css
Only in scss/src/app: app.component.scss

diff -r css/src/app/app.component.ts scss/src/app/app.component.ts
6c6
<   styleUrls: ['./app.component.css']
---
>   styleUrls: ['./app.component.scss']

Only in css/src: styles.css
Only in scss/src: styles.scss

そのプロジェクトでどのようなスタイルシート言語を使用するかは.angular-cli.json内のstyleExtで指定しているようです。 この部分はng setコマンドで変更することができます。
ng set defaults.styleExt scss

そして全体でどのスタイルシートを使用するか、という指定はstylesで指定しています。 この部分をコマンドで変更する場合はjsonの構造に従って添字も指定する必要があります。
ng set apps.0.styles styles.scss

あとはapp.componentのstyleUrlsなどを手動で変更し、scssファイルを作成して書き換えは終了です。

また、コマンドを逐一入力しなくても.angular-cli.jsonを直接書き換えても問題なく動作しました。

参考

Angular2 - Angular-CLI SASS options - Stack Overflow