Overriding Bootstrap LESS variables after @import

Question

I am trying to override some bootstrap LESS variables before compiling e.g.

// Core variables
@import "variables.less";

// Trying to override @white from variables.less
@white: #de1de1;

// other bootstrap @imports....

The above code doesn't override @white, but if I add @white at the end of the variables.less file, it works fine.

It would appear that variables can only be overwritten in the same file. But this doesnt make sense to me, as I assumed LESS didnt work like that. For example other @import files (omitted from code above) use the @white variable. If they are able to use it outside the variables.less file, why can't I override it outside the file?

I'm using Less Php 0.3.9 to compile my code.

NOTE: I've just tried the following code:

// Core variables
@import "variables.less";
@import "variables-custom.less";

Now the value of @white is taken from variables-custom.less (which somewhat solves my problem). It still doesn't explain why my original code doesn't work though. Would appreciate answers on that.

Answer 1

Variables will get overwritten (and be available) in the order that you have the imports set to compile.

For example:

@import "variables.less";   //@white is set
@import "styles.less";        //UPDATED @white NOT available
@import "variables-custom.less";   //Update @white
@import "styles2.less";        //UPDATED @white available

So, just make sure that if you are not going to use the variables.less but rather a variables-custom.less, you put it BEFORE all of the other .less file (except the variables.less of course).