SolidZORO / next-plugin-antd-less

🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
MIT License
345 stars 48 forks source link

lessVarsFilePath doesn't work #74

Closed Webbrother closed 2 years ago

Webbrother commented 2 years ago

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 commented 2 years ago

Unfortunately, I have the same issue

esanchezvz commented 2 years ago

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 commented 2 years ago

@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, https://github.com/SolidZORO/next-plugin-antd-less/issues/36

makoncline commented 2 years ago

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

coolbeatz71 commented 2 years ago

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 commented 2 years ago

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