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

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *