Using CSS modules with with-ant-design-less

[leftyfl1p]

My goal is to use css (less) modules with my custom react components along with ant design. I've cloned with-ant-design-less from the examples but after enabling cssModules in next.config.js ant design's css is missing, while my css (less) modules appear to load. The easiest way to observe this behavior is by changing next.config.js like so

module.exports = withLess({
  cssModules: true,
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
...

Upon next server restart all ant design css/less will be missing.

[leftyfl1p]

After many hours of googling I found the following workaround #8156 vercel/next-plugins#507. Feels overkill for the issue but it works.

[franknoel]

I also used this on a project. We ended up having multiple issues like missing Webpack plugins (i.e. minifier) and polyfills, duplicated CSS, import order warning, etc.

[leftyfl1p]

What was the solution instead? I don't really need less, I mostly just wanted to change ant variables.

[franknoel]

We used it anyway but it was painful and I would personally argue against it. The problem with this is not less, but the css modules setup. You either need to load the whole Ant Design stylesheet and overwrite the variables, or load the Ant Design css/less modules with babel-plugin-import.

[a-vershinin]

@leftyfl1p Could you provide some work example in repo? In Codesandbox or sonething else

[leftyfl1p]

@a-vershinin for the issue or the hacky solution that I found?

[SolidZORO]

The official plugin has expired and is no longer applicable to the new version of next. js.

you can try next-plugin-antd-less , support next.js v9.5.