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

Please make sure you following all steps from this article https://medium.com/anna-coding/how-to-config-ant-design-in-next-js-with-custom-theme-b704022591af . Make sure you define your plugins correctly and use next-compose-plugins lib( https://www.npmjs.com/package/next-compose-plugins ) correctly.

Answer 2

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