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

You can still use a single .css which contains all style rules for all of your components and import the same .css file in every component (you have to use the selector/tag name instead of :host {). The browser caches the file anyway therefore it will download it only once.

The advantage of small scoped .css files is lost though.

I don't know about Less but for SASS I'm currently working on a custom importer where import paths can be prefixed with an id/name and the custom importer checks locally if an override for that id/name is defined and returns this instead, otherwise the import falls back to the default.
This way creator of components can provide override hooks where the user can pass it's own variables, mixins, ... instead of the default at build time.