How to fix Angular CLI forcing scss over sass?

Question

In my projects I usually want to take advantage of the .sass syntax. So I created a project like so:

ng new myProject --style=sass

But the result was that all stylesheets including the base styles file had .scss extension. Now of course I tried correcting that using cli:

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

and directly manually changing stuff in the angular.json:

"schematics": {
        "@schematics/angular:component": {
          "style": "sass"
        }
      }

But with no success. Every new component's styles file I generate comes with .scss extension. How do I fix that?

Answer 1

I believe your schematics need to use styleext instead of style.

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

ng config schematics.@schematics/angular:component.styleext scss is going to set your global default which should add an entry to the bottom of your angular.json file like so:

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

However, if you have the defaultProject specified, any schematics inside of here will probably override. So inside of your default project in the angular.json file, update that style property in the schematics to styleext:

"projects": {
  "my-project": {
    ...
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
    ...

---

After more research It seems like you can change your CLI version to an older version, or wait for an update that is on the way (fix merged yesterday). Sass ext support was dropped noted in this issue, but it seems to have been re-added noted in this issue.