Using scss as default style sheet in Angular 6+ (styleExt)

Question

Apparently the way to declare the default stylesheet extension changed from Angular 6 onwards. The styleExt property in the angular.json is not recognised any longer.

For new projects this can be set with an option on the CLI --style=scss on the new command.

However, how do you change this for exsting projects that I migrate from Angular <5 or if you forgot to do this during project creation?

This question is meant to be strictly related to the breaking changes by the version 5 to 6 of Angular.

Answer 1

The position on which this is set changed in the angular.json. There are 2 ways to set this option now.

Via the Angular CLI:

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

Directly in the angular.json:

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

Angular 9 Update:

Note that from Angular 9 onwards styleext is renamed to style. So we end up with:

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

and

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