Can less variables be compiled to css custom properties? How to merge less code in components into one large .less file?

[hbshun]

div{
   @main-color: red;
   color: @main-color;
   border: 1px solid @main-color;
}

compiled out:

div{
    --main-color: red;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

I know that the variable of less can be used not only for the value of the property, but also for the key of the property. But if don't consider the latter, because it is not used in my project, how to achieve the compilation from less variables to css custom properties? Thanks!

[matthew-dean]

If you want to do the latter, why not just write it that way? There's no reason to use a Less var that's not used in a Less function.

[hbshun]

Thank you very much for answering my question.

I have found a plugin to achieve it, but there is another problem that when less vars are used as arguments in less functions, like darken or fade, it failed.

The background is that a large react project with lots of components, and each components has the its less. When build the project, all less code will be merged and compiled into one bundled css file by webpack.

The requirement now is that user can change theme (color of button, background, link, text, etc.) arbitrarily online, and I have defined less vars for them in entry. For less modifications, there are two solutions: inject css custom properties into html and compile less with modifyVars in the broswer.

The former does not seem to work, and the difficulty of latter is how to merge less code dispersed into one less file instead of compiled into css.

[matthew-dean]

@hbi99 If you're using Less, the latter is probably the only solution that is going to be feasible. Otherwise it's probably outside the scope of Less.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Gervwyk]

@hbshun did you manage to get this working? I'd be very interested to figure out how we can change less variable client side in libraries like antd. Any ideas?

[kiril-daskalov]

Hey guys, is there a way to do that?