Angular 2 - Style reusability with LESS and Webpack?


How to reuse styles written in LESS files In Angular 2 app with Webpack?


I want to have a common.less file that contains the styles/style variables common for all the components. (example: some theme related variables)

Then, I want to import this common.less file in each of the component style's file, so that I don't have to rewrite these common styles/style variables there.

I am a Webpack user. When I tried this, I get the contents from common.less file getting copied in all component style files, which is bad.

Need help in doing this properly. Appreciate your help on advance.

Comments (2)

Grey Davis's photo

If you're using less you can just do a @import "common.less"; into any other less file and it would just work

VignesH KumaR's photo

@greedee: Thanks. I am doing exactly the same. But all the contents of the common.less file is getting copied in all the files in which I use it, which is an unwanted duplication. Is there a way to configure Webpack properly to solve this.,?