How to combine less variables from multiple files into one file?

Question

I have two variable files i.e. component-lib.less and component-override.less.

Ex. component-lib.less

@primary-color: red;
@secodary-color: black;
@background-color: grey;

Ex. component-override.less

@background-color: blue;
@component-padding: 12px;

So whenever I want to use these variable I need to import both files into the target less file.

Ex. Input.less

@import './component-lib.less';
@import './component-override.less';

Input {
  padding: @component-padding;
  background-color: @background-color;
}

Is there any way where I can import the variable files into one file and then export all variables from there?

Ex. variable.less

@import './component-lib.less';
@import './component-override.less';

@brand-color: orange;

and use it like this,

Ex. Input.less

@import './variable.less';

Input {
  padding: @component-padding;
  background-color: @background-color;
}

nilesh thorave · Accepted Answer · 2021-05-24 04:50:00Z

1

The answer to your question is "Yes". You can import all .less variable files in a single .less file and use that in your components .less files. In your case you can create a 'variable.less', inside this file import 'component-lib.less' and 'component-override.less'. Then use 'variable.less' in 'Input.less' How does this work? Basically, the magic happens in less-loader. 'less-loader' is a package usually used to load and parse .less files. The loader goes through 'Input.less' and finds reference to 'variable.less' which in turns find reference to other files('component-lib.less' and 'component-override.less'). It imports all the variables and parses the 'Input.less'. I hope you find this explanation helpful. Let me know if you have any doubts.

answered May 24, 2021 at 4:50

nilesh thorave

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Trisma Over a year ago

It would maybe be useful to have some actual code here as well. A description is good but a lot of people get much more out if visuals

Collectives™ on Stack Overflow

How to combine less variables from multiple files into one file?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related