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

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

In angular.json file

1. In build part and in test part, replace:

   "styles": ["src/styles.css"], by "styles": ["src/styles.scss"],

2. 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

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