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

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!

[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?

[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.