Using scss as default style sheet in Angular 6+ (styleExt)
Solution 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"
}
}
Solution 2
To go from css
to scss
for an existing project, follow these steps:
In angular.json
file
In
build
part and intest
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
Daniel Lerps
Passionate .NET, Java-, Web- and Android-Developer
Updated on August 17, 2020Comments
-
Daniel Lerps over 3 years
Apparently the way to declare the default stylesheet extension changed from Angular 6 onwards. The
styleExt
property in theangular.json
is not recognised any longer.For new projects this can be set with an option on the CLI
--style=scss
on thenew
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.