antd theme customization broken with next-plugin-antd-less versions >= 1.0.0

[rriski]

Steps to reproduce:

1. git clone https://github.com/rriski/next-plugin-antd-less
2. yarn && yarn dev
3. Table background is red and table header background is blue as specified in assets/antd-custom.less.
4. Update next-plugin-antd-less to version 1.0.5.
5. yarn && yarn dev
6. Table background and header color are not changed from the default values.

The repo follows https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less with next-plugin-antd-less added. This plugin supported customizing the antd theme (https://ant.design/docs/react/customize-theme) prior to v1.0.0.

I suppose this commit is to blame: https://github.com/SolidZORO/next-plugin-antd-less/commit/418ec5c7a57153af00cc7632fbbc21b5a8b1e7e9.

[SolidZORO]

this file https://github.com/rriski/next-plugin-antd-less/blob/main/assets/antd-custom.less

will change to

@import '~antd/lib/style/themes/default.less';   <-- You need to import it at once in your project

@primary-color: #52c41a;
//
//@table-bg: "red";           <-- 'red' is not a valid css value.
//@table-header-bg: "blue";

@table-bg: red;
@table-header-bg: blue;

The previous version used 'less-vars-to-js' to help with the conversion and the problem may have been hidden, but now I've removed 'less-vars-to-js'. The problem came up.

[SolidZORO]

Of course, all of these changes were made just so that the changes to antd less vars would take effect immediately.

[morellodev]

@import '~antd/lib/style/themes/default.less';

It would be better to specify in the README that the default Ant variables file must be imported 😃

[rriski]

Confirming that adding @import '~antd/lib/style/themes/default.less'; to the override file resolves this issue.

[akay0214]

Doesn't work for Antd 4.15+

[cbfn]

Any solution for this?

My antd version is 4.16.5 using latest next.js and tailwindcss