Use custom theme - next.js, less, ant design

Question

my goal is to modify default theme in antdesign but I cant achieve it. I even move from sass to less but still something won't work.

I tried probably everything on the internet. From official nextjs example to some tutorials and stuff.

This is my next.config.js

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./styles/global.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader",
      });
    }
    return config;
  },
});

Package.json

{
  "name": "with-ant-design",
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@ant-design/icons": "4.5.0",
    "@next/bundle-analyzer": "^9.1.4",
    "@zeit/next-less": "^1.0.1",
    "antd": "4.12.3",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "cross-env": "^7.0.3",
    "dayjs": "1.8.28",
    "esm": "^3.2.25",
    "less": "^2.7.2",
    "less-loader": "^6.0.0",
    "less-vars-to-js": "^1.3.0",
    "next": "latest",
    "null-loader": "^4.0.1",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "sass": "^1.32.8",
    "webpack": "4.46.0"
  },
  "browser": {
    "fs": false,
    "path": false
  },
  "license": "MIT",
  "devDependencies": {
    "antd-scss-theme-plugin": "^1.0.8"
  }
}

Most of the time when I was searching for error meanings I found out that the problem is with the version of any package. But changing versions of packages just gave me new errors and i ended in ininity loop where i was unable find combination of matching version. Maybe you just can show me your way how are you editing antdesigin or config it will be really awesome.

Answer 1

You can use this zero dependency module to customize your antdesign theme in next.js project-

https://www.npmjs.com/package/next-plugin-antd-less

? Features

• Zero Dependency on other Next.js Plugins
• Support Both Next.js & CRA Project
• Support Hot-Update After modifying Antd less vars
• Support Serverless Mode
• Support Antd Pro

? Compatibility

• next v12 & v11 (webpack 5, SWC or Babel)
• less v3.0+

To learn more on how to configure the webpack in next.config.js file check this article-

https://www.elvisduru.com/blog/how-to-customize-ant-design-theme-in-nextjs

Note: Some people noticed that the code compilation and hot reloading slowed down after doing the above customizations.

I also faced the same issue. The problem seems to be happening because when you add this custom configuration, the antd's .less files are also needed to be compiled which is slowing down the overall code compilation/hot reloading. In my case, I had to do some minor customizations. So what I did was disable this custom configuration (next.config.js) while developing the app and then just before deploying the app, I enabled it.

Answer 2

since @zeit/next-less has been deprecated, you can customize your theme by fallowing ant document for dynamic theme. just need to config provider. no extra babel config. it works fine for me. https://ant.design/docs/react/customize-theme-variable