Angular CLI supports the popular CSS Preprocessors built-in: Sass/SCSS, Less and Stylus. Respectively, these formats are supported:
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
Note: Don’t forget to adjust the main styles file in angular-cli.json as well.
That’s it for today.