Angular6 で scss を有効にする方法

はじめに

つい先日、ついに Angular6 正式版がリリースされました 🎉
ただ、Angular-CLI の設定ファイルである .angular-cli.json が angular.json へと変更され、それに伴い大幅な仕様変更が入りました。

本記事では、angular.json のざっくりとした使い方を、最もポピュラーである 「scss を有効化する」 というケースを想定して紹介してみます。

angular.json で scss を有効にする

angular.json の仕様 を見てみると、angular.json では projects プロパティにプロジェクトを設定し、そのプロジェクトの schematics プロパティに @schematics/angular:component や @schematics/angular:directive というキー名で設定したい項目を入力する方式へ変更されたようです。

試しに

ng new my-app

でサンプルプロジェクトを作成してみたところ下記の angular.json が自動的に生成されていました

angular.json

  ...
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      ...

この schematics に

    "schematics": {
        "@schematics/angular:component": {
            "styleext": "scss"
        }
    }

を設定することで、CLI からの新規コンポーネント生成が scss を有効とした状態で利用できるようになりました。

> ng g c test

CREATE src/app/test/test.component.scss (0 bytes)
CREATE src/app/test/test.component.html (23 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (262 bytes)

schematics は上記例のようにプロジェクト自体に設定することもできますが、「全プロジェクトで scss を使うからいちいち設定したくない」 という場合は、angular.json の最上位プロパティとすることで全プロジェクトで有効とすることもできます。

CLI から設定

CLI から設定する場合はこうするようです。
ng set ではなく ng config に変更されたましたね。
が、、、6.0.0 ではエラーとなってしまいました。そのうち修正されると思います。

ng config schematics.@schematics/angular:component.styleext scss

追記：

現状だと json 形式で指定すると CLI からでも設定できるようです

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

新規作成時

プロジェクトを新規で作成する際は、以前と同じように --style=scss を付与することで、 schematics の設定された angular.json が出力されることを確認しました。（6.0.0）

ng new my-app --style=scss

schematics のデフォルト設定項目一覧

• @schematics/angular:component
• @schematics/angular:directive
• @schematics/angular:module
• @schematics/angular:service
• @schematics/angular:pipe
• @schematics/angular:class

あの設定どこに行ったんだ！？ という方は上記を探してみると見つかるかもしれません。