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 su

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