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

Gourav Kajal

Follow

Mar 17 · 5 min read

While creating a new Angular application using Angular CLI, you might have forgotten to use the style=scss flag or you simply selected CSS as your stylesheet when CLI prompts for it. Maybe you were not familiar with CSS pre-processors like SCSS while starting with a new app.

The reason could be anything to use CSS instead of SCSS, but now you want to switch to using the SCSS stylesheet format in your application. On second thought, you know that this transition could be daunting because your application has already gotten big and complex.

But, as explained by Thabo Ambrose in his article, there are ways to do this migration smoothly. In this article, we will cover :

• How we can use an Angular schematics NPM package to perform the migration with just one command
• How we can perform the migration manually i.e. using the ng CLI command(s)
• How we can use NPM package renamer to perform the migration

NOTE: In this article, we will not cover what SCSS and Angular Schematics are. I presume you have some understanding of these topics.

Generally, to generate a new Angular application with SCSS stylesheets, we can use this Angular CLI command:

ng new dummy-migration-app --style=scss

or you simply hit the ng new dummy-migration-app command and wait for the CLI to prompt for stylesheet options like this:

Using the NPM package schematics-scss-migrate

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

To migrate from CSS to SCSS using this package, all you have to do is, install the package, ideally as a dev-dependency and run the following :

ng g schematics-scss-migrate:scss-migrate

And that’s it, the above command did the following:

• Renamed all the stylesheets from .css to .scss in the src folder recursively
• Updated the styleUrls value to point to the new file names for the stylesheet in the component classes relative to the component style files.
• Updated the component styles schematics value in the angular.json file or creates one if the schematic does not exist.
• And renamed styles.css references to .scss in the angular.json file

NOTE: You can use dry-run=true for testing before doing the actual migration, like this:

ng g schematics-scss-migrate:scss-migrate --dry-run=true

Manual migration using Angular CLI

With a change that came with Angular 9, styleext was renamed to style, if you are on version 9 or later, then your command should be

ng config schematics.@schematics/angular:component.style scss

NOTE: For Angular CLI versions older than v6 beta, use ng set in place of ng config.

Or you can directly set the schematics in the angular.json config file like the below:

"schematics": {     
    "@schematics/angular:component": {       
        "style": "scss"     
    }
    ...   
}

Now, you have to update the extension for style.css for your project build and test options to style.scss, just like this:

{  
    "projects": {      
        "your-project-name": {      
            ...             
            "architect": {
                "build": {
                    "options": {
                        "styles": [  
                            "src/styles.css" // update   
                            ...
                         ] 
                         ...
                     }
                     ...
                 },
                 "test": {
                     ...
                         "options": {
                         ...
                         "styles": [
                             "src/styles.css" // update
                         ],
                 }      
             },
         }
     }
 } 
}

And now, to change the stylesheet file extensions from .css to .scss, follow the instructions below.

Change the project’s stylesheet files from .css to .scss using the renamer NPM package.

Renaming files one by one by yourself definitely is not a good idea. So for this, we can use an NPM package called renamer. It’s worth to be noted that this package is not just for renaming .css to .scss, but for all other files too.

To use this package, just simply install it, maybe globally like this:

npm i -g renamer

Now, in the terminal, navigate to the src folder in your project’s directory.

As an advice, before running commands on your project, stage/commit your work or maybe switch to a new branch to play around with the renamer tool. For more details about renamer, click here.

Now, run the following command to rename all .css files with .scss

renamer --find css --replace scss *

The above command renames all files with .CSS to .SCSS in the current working directory which is src, since we had navigated to it, this is because of the wildcard/glob at the far end of the command which is “*”.

Now, let’s verify if the expected work is done or not.

And, indeed it is.

Now, as we have changed the extension of all styling files from .css to .scss throughout the application, we have to change the styleUrls as well in all components.

Doing this one by one can be frustrating as your application must have too many components. Here, default convention from Angular and an IDE like VS Code can save us. We know that every component-specific style file name ends with .component.css (.component.scss in our case, as we updated the extensions), for e.g. app.component.css. Now, search for all .component.css entries globally using your IDE (VS Code in my case). In VS Code, you can simply search globally by using the shortcut Ctrl + Shift + f and replace all searched entries with new values using Ctrl + Shift + h, like this :

These shortcuts can save a lot of time and work.

Now, just compile your app and see if there is an error. If not, then we are all set with migration from .css to .scss.

Conclusion

There are multiple ways to migrate your angular application/project from .css to .scss. My favorite one is using the schematic-scss-migrate package, as it doesn’t require any manual work and can save a lot of time. You can even use the dry-run option to verify the migration before doing it.

This is it for this article. I hope this was helpful. Thanks for reading!

Resources

• Migrate from .CSS to .SCSS stylesheets for an existing Angular project
• Getting Started With SCSS-Migrate
• renamer