A quick guide to using SCSS in an Angular application that was scaffolded to use the default stylesheet format.

You might have forgotten to provide the _style=scss _flag or maybe you didn’t know that it existed when you were generating a new Angular application using the Angular CLI, and now you want to switch to using the SCSS stylesheet format in your project, this transition can be daunting in cases where the project has already gotten big.

In this article, I will cover:

• Using an Angular schematics NPM package to perform the migration with just one command.
• The manual way of performing the migration i.e. using the ng cli command.
• Using the NPM package renamer to perform the migration

I will not cover what SCSS and  Angular Schematics are in this article because I presume you know what these are. You can read on a great Angular Schematic series of articles here on  inDepth.dev

Normally, to generate a new Angular project that uses SCSS stylesheets using the Angular CLI, you’d have to run the following command.

ng new my-scss-app --style=scss

A quick and easy way to perform the migration is to use the schematic NPM package  schematics-scss-migrate . Read more on what this schematic package does on  NPM .

#angular #scss #schematics