export customized less variables to css variables

[monstasat]

Hi!

I've tried craco-antd to customize default antd theme and it works great!

However, I have a question about further customization of antd components:

I use default CRA configuration with CSS modules and do not use Less (except for configuring antd).
In my app I use a Header component and I want to add a bottom border to it. I also want this border to have a color corresponding to the current theme, which is stored under @border-color-base less variable.
Since default antd theme does not apply any border to Header, how can I achieve this?
The perfect way for me is to set the color from a css-variable, but how can I create one?
Defining plain new set of css variables with same values as in Less seems a bad idea as it breaks DRY principle.
How can I translate a set of Less variables to a set of CSS variables?
In other words, I want to be able to use antd color scheme without using Less in my project.

Thanks in advance for your help!

[alistairjcbrown]

You can use a JSON file instead of a Less file - rename your antd.customize.less to antd.customize.json (source). If you're using CSS-in-JS, that would give you a single file which you can include in your application and that craco-antd can also use for customizing the Ant Design theme.
Does that solve the issue?