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

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"    }}

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"    }}

css angular sass angular6 angular-cli

To go from css to scss for an existing project, follow these steps:

In angular.json file

In build part and in test part, replace:
"styles": ["src/styles.css"], by "styles": ["src/styles.scss"],
Replace:
"schematics": {}, by "schematics": { "@schematics/angular:component": { "style": "scss" } },

Using ng config schematics.@schematics/angular:component.styleext scss command works but it does not place the configuration in the same place.

In your project rename your .css files to .scss

CodeHunter