How to use Less with Angular 2?

Question

I would like to know how I can add less compiling to my Angular 2 project. Because each component has its own .css file (which now will be a .less file) I am not sure on how I could make the file compile to css.

I have also googled the issue without finding any solution to my problem.

EDIT To make my question more clear: I would like to have one .less for each component, just as it is as default with the .css files in Angular 2. I just want each .less to be precompiled, and because Angular is including the css as inline script after the component is processed by Angular, I guess that I need some less-preprocessing script in between, does it exist?

I would rather not have one big .less file included manual, for the whole project, which would of course be a possible solution. This solution seems to not be inline with the Angular environment though...

Answer 1

New project

You can use the --style flag to set a CSS preprocessor

ng new my-app --style less

Existing project

1. If you have an existing project, then you can edit .angular-cli.json file and set defaults.styleExt value to less. Or you can use simply use: ng set defaults.styleExt less
2. Rename a component's CSS file from mycomp/mycomp.component.css -> mycomp/mycomp.component.less
3. Update styleUrls in mycomp/mycomp.component.ts, e.g. styleUrls: ['./mycomp.component.css'] -> styleUrls: ['./mycomp.component.less']

Resource

Answer 2

If you are creating a new app, just after the app name add --style to choose your preprocessor.

ng new my-first-app --style less

All options for angular cli 'new' command