Migrate from CSS to SCSS stylesheets for an existing Angular project

Migrate from CSS to SCSS stylesheets for an existing Angular project

A quick guide to using SCSS in an Angular application that was scaffolded to use the default stylesheet format. Migrate from CSS to SCSS stylesheets for an existing Angular project

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Speed up your Angular schematics development with useful helper functions

Angular CLI schematics offer us a way to add, scaffold and update app-related files and modules. In this article I will guide you through some common but currently undocumented helper functions you can use to achieve your goal. Speed up your Angular schematics development with useful helper functions

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

Overriding Angular Schematics

Overriding Angular Schematics - Last week I was working on an Angular Library, and in all the components we wanted to have encapsulation set to None and changeDetection to OnPush. We also wanted to add all components and directives to exports. Let's see how we can achieve this without writing any code.