lessVarsFilePath doesn't work

[Webbrother]

Issue

I'm trying to use next-plugin-antd-less according to the documentation, but my antd variables don't work.

I'm trying to use lessVarsFilePath property (everything according to the documentation), but it just doesn't work.

How to reproduce:

Please see this repo https://github.com/Webbrother/next-plugin-antd-less-issue

yarn
then
yarn dev

I have variable in vatiables.less:

@primary-color: #ff0000; // <- this is a red color

I expect to see the red (my custom override color) button on the page, but I see the default color (blue).

How can I fix it?

[viktor-mozdolevskyi]

Unfortunately, I have the same issue

[esanchezvz]

Having the same issue, what I did as a work around for the moment is created a js file exporting an object with the variables I want to override and importing it to next.config.js and setting the variables overrides in the modifyVars option just to keep the next.config.js file a little cleaner

[SolidZORO]

@Webbrother

// src/styles/variables.less
@import '~antd/lib/style/themes/default.less';   // <------ add this

//@primary-color: red;
@primary-color: #ff0000; // change antd primary-color

seemore, #36

[makoncline]

Adding the import to the override file does not solve for me either.
Doing what @esanchezvz suggested does work, but not ideal.

[coolbeatz71]

Having the same issue, what I did as a workaround for the moment is created a js file exporting an object with the variables I want to override and importing it to next.config.js and setting the variables overrides in the modifyVars option just to keep the next.config.js file a little cleaner

This solution is good. But not ideal for complex cases like reusing antd default variables. for example:

@text-color: fade(@black, 65%);

[sam-ac-dixon]

@Webbrother

// src/styles/variables.less
@import '~antd/lib/style/themes/default.less';   // <------ add this

//@primary-color: red;
@primary-color: #ff0000; // change antd primary-color

seemore, #36

This fixed it for me.