How do I add less to my Angular 2 CLI build?

Question

I have created a project with the Angular CLI and I would like to add less files to the build. I want a main less for shared and global styles and a less file in with the components for local styles. How can I add a compile less files step to the build process?

Answer 1

When generating a new project you can also define which extension you want for style files:

ng new less-project --style=less

Or set the default style on an existing project:

ng set defaults.styleExt less

;)

Answer 2

We used the following command to update the default style type for our existing Angular project from styl to less.

ng config schematics.@schematics/angular:component.styleext less

The following snippet, take from our angular.json file, shows the change:

 "schematics": {
    "@schematics/angular:component": {
      "styleext": "less"
    }