There might be chances you have set up your angular application with CSS styles but later you want to change it to use SCSS instead.
This blog post will show how we can change the existing Angular 13 application to use SCSS instead of CSS.
Steps:
- Update angular.json file.
- Update CSS files for SCSS extension.
- Update components.
- Update to use Bootstrap SCSS.
Update angular.json file.
Make the following changes in the angular.json file.
Add scss under Schematics as follows.
"@schematics/angular:component": {
"style": "scss"
},
Add inlineStyleLanguage: SCSS under build options
Change styles.css to styles.scss under build styles.
Add inlineStyleLanguage: SCSS under test options
Change styles.css to styles.scss under test styles.
Now our angular.json is updated and uses scss instead of CSS.
Update CSS files for SCSS extension
Now we need to change all CSS files to use the scss extension.
This is pretty simple just change all CSS files extensions to scss.
For ex:
styles.css to styless.scss
and
app.component.css to app.component.scss
Similarly, change all extensions under all the components.
Update components to use SCSS
Update all components to use .scss files instead of .css
and that’s it our angular application is now ready to use scss styles of CSS styles.
Next, we will update support for Bootstrap scss instead of Bootstrap CSS.
Update to use Bootstrap SCSS instead of Bootstrap CSS
It’s possible you are using some third-party styles such as bootstrap. So let’s upgrade bootstrap to use scss. A similar approach can be used to use other style packages.
Assuming you have installed bootstrap via npm using
npm i bootstrapYou will have bootstrap/scss folder under node_modules
Under that, you will find file bootstrap.scss
Add this file reference in the angular.json file as follows.
Above is for the build section, update test section too.
Congratulations!
You have successfully updated the Angular 13 app to use scss instead of CSS styles.
Suresh Maurya 