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.
With the help of Angular CLI, you can install CSS or SCSS on your project and start working on that in a suitable way. If you are working with the CSS or SCSS in your angular project then it is very easy for you as compared to most other frameworks.
Angular applications are styled with standard CSS. That means you can apply everything you know about CSS stylesheets, selectors, rules, and media queries directly to Angular applications. Additionally, Angular can bundle component styles with components, enabling a more modular design than regular stylesheets.
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" } }
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With