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

问题

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.

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

回答2:

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

来源：https://stackoverflow.com/questions/50619327/using-scss-as-default-style-sheet-in-angular-6-styleext