Angular 2 - Style reusability with LESS and Webpack?

Hi,

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

Scenario:

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.

#less #webpack #style-reusability

Responses(1)

Grey Davis

Frontend and other stuff

Jul 17, 2016

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

Senior FrontEnd Dev @ Freshworks Inc.,

Jul 17, 2016

@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.,?

Thread

Angular 2 - Style reusability with LESS and Webpack?

Scenario:

Responses(1)

Recent threads

Search Hashnode

Angular 2 - Style reusability with LESS and Webpack?

Scenario:

Responses(1)

Recent threads