CODEWITHSUNDEEP
angularsassangular-cli
Ruslan
Ruslan

Reputation: 134

How to fix Angular CLI forcing scss over sass?

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?

Upvotes: 0

Views: 420

Answers (1)

user10747134
user10747134

Reputation:

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.

Upvotes: 1

Related Questions