【Angular】stylesheetのfomatを変更したい

環境

• Angular 13.2.7

Angularでng newしてプロジェクトを作成する際に、以下の設定で選択したstylesheetによってng generate componentしたときのスタイルシートの拡張子が変わります。

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 

CSSを選択した場合、.cssで作成されます。

>ng generate component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (612 bytes)
CREATE src/app/test/test.component.ts (267 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (875 bytes)

ただ間違えて設定してしまい、後から拡張子を変更したい場合はプロジェクトのルートフォルダにあるangular.jsonの以下設定を変更すれば拡張子を変更できます。

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "(プロジェクト名)": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss" //scssに変更
        },

変更した拡張子で作成されます。

>ng generate component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (612 bytes)
CREATE src/app/test/test.component.ts (268 bytes)     
CREATE src/app/test/test.component.scss (0 bytes)     
UPDATE src/app/app.module.ts (875 bytes)

参考

• Angular-cli from css to scss