CODEWITHSUNDEEP
javascriptreactjsnext.jslessantd
user9817924
user9817924

Reputation:

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.

Upvotes: 0

Views: 7554

Answers (3)

Message Akunna
Message Akunna

Reputation: 79

For nextjs 12 and above this method how to customize ant design theme in a nextjs application without-babel swc provides you with the option to still use nextjs swc compiler unlike other options that disables it and uses babel js which is considered slower. and also there is no nextjs config issues to worry about.

  1. Import antd variables in _app.tsx

    import 'antd/dist/antd.less'

  2. Install next-with-less package to add less support to Next.js application.

    yarn add next-with-less less less-loader

    or

    npm i next-with-less less less-loader

  3. Use next-with-less to add less support to Next.js application. You can find the list of antd variables here,next.config.js:

    const withLess = require('next-with-less');
/** @type {import('next').NextConfig} */
module.exports = withLess({
    lessLoaderOptions: {
        lessOptions: {
            modifyVars: {
                // Add variables here
                'font-family': 'Quicksand, sans-serif',
                'border-radius-base': '50px',
            },
        },
    },
    compiler: {
        styledComponents: true,
    },
});

Upvotes: 1

Maziar parsi
Maziar parsi

Reputation: 484

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

Upvotes: 1

iShubhamPrakash
iShubhamPrakash

Reputation: 708

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.

Upvotes: 0

Related Questions