Setting Up a CSS Preprocessor in Angular CLI

Angular CLI has built-in support for the popular CSS preprocessors: Sass/SCSS and Less. Respectively, these formats are supported: sass, scss and less (Stylus was supported as well, until its support was removed in Angular 12).

In this post, we’re going to use scss as an example.

Starting a New Project

In case the project hasn’t been generated yet, we can pick one of the supported CSS preprocessors through the interactive prompt of ng new, or set it explicitly while generating the project:

ng new sample-project --style=scss

Updating an Existing Project

In case the project was already generated, but we want to set a preprocessor - we can change the default:

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

From now on, whenever we generate a new component, Angular CLI creates the style file with an appropriate format.

All that’s left is to adjust all styles in the project to the new format (actual file format and styleUrl metadata).

Note: Don’t forget to adjust the global styles file in angular.json as well - under architect.build.options.styles.