Setup Bootstrap SCSS in Angular 13 Manually

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 bootstrap

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s