title: Use custom theme - next.js, less, ant design
body: <p>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.</p>
  <p>I tried probably everything on the internet.
  From official nextjs example to some tutorials and stuff.</p>
  <p>This is my next.config.js</p>
  <pre><code>/* eslint-disable */
  const withLess = require(&quot;@zeit/next-less&quot;);
  const lessToJS = require(&quot;less-vars-to-js&quot;);
  const fs = require(&quot;fs&quot;);
  const path = require(&quot;path&quot;);
  
  // Where your antd-custom.less file lives
  const themeVariables = lessToJS(
    fs.readFileSync(path.resolve(__dirname, &quot;./styles/global.less&quot;), &quot;utf8&quot;)
  );
  
  module.exports = withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
    },
    webpack: (config, { isServer }) =&gt; {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) =&gt; {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === &quot;function&quot;) {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === &quot;function&quot; ? [] : origExternals),
        ];
  
        config.module.rules.unshift({
          test: antStyles,
          use: &quot;null-loader&quot;,
        });
      }
      return config;
    },
  });
  </code></pre>
  <p>Package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;with-ant-design&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;cross-env NODE_OPTIONS='--inspect' next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@ant-design/icons&quot;: &quot;4.5.0&quot;,
      &quot;@next/bundle-analyzer&quot;: &quot;^9.1.4&quot;,
      &quot;@zeit/next-less&quot;: &quot;^1.0.1&quot;,
      &quot;antd&quot;: &quot;4.12.3&quot;,
      &quot;axios&quot;: &quot;^0.21.1&quot;,
      &quot;babel-plugin-import&quot;: &quot;^1.13.3&quot;,
      &quot;cross-env&quot;: &quot;^7.0.3&quot;,
      &quot;dayjs&quot;: &quot;1.8.28&quot;,
      &quot;esm&quot;: &quot;^3.2.25&quot;,
      &quot;less&quot;: &quot;^2.7.2&quot;,
      &quot;less-loader&quot;: &quot;^6.0.0&quot;,
      &quot;less-vars-to-js&quot;: &quot;^1.3.0&quot;,
      &quot;next&quot;: &quot;latest&quot;,
      &quot;null-loader&quot;: &quot;^4.0.1&quot;,
      &quot;postcss-preset-env&quot;: &quot;^6.7.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;sass&quot;: &quot;^1.32.8&quot;,
      &quot;webpack&quot;: &quot;4.46.0&quot;
    },
    &quot;browser&quot;: {
      &quot;fs&quot;: false,
      &quot;path&quot;: false
    },
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;devDependencies&quot;: {
      &quot;antd-scss-theme-plugin&quot;: &quot;^1.0.8&quot;
    }
  }
  </code></pre>
  <p>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.</p>