Angular CLI supports the popular CSS Preprocessors built-in: Sass/SCSS, Less and Stylus. Respectively, these formats are supported: sass, scss, less and styl.

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

Starting a New Project

In case your project hasn’t been generated yet, you can set one of the supported CSS preprocessors while generating the project:

ng new sample-project --style=scss

Updating an Existing Project

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

ng set defaults.styleExt scss

From now on, as soon as generating a new component - Angular CLI will create the style file with an appropriate format.

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

Note: Don’t forget to adjust the main styles file in angular-cli.json as well.

That’s it for today.