CODEWITHSUNDEEP
cssweblesscss-variables
Nikhil Mahirrao
Nikhil Mahirrao

Reputation: 3721

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

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;
}

Upvotes: 1

Views: 287

Answers (1)

nilesh thorave
nilesh thorave

Reputation: 11

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.

Upvotes: 1

Related Questions