LESS and Ant Design integration without plugins, hooking into built-in Sass config

[haggen]

I recently started working on a brand new project that was set on using Ant Design as a design guide and UI framework. I wanted to also use Next because I recently learned it and loved the ergonomics. Plus they were also set on going serverless so I thought it would be a good match. Oh boy... I mean, Next is awesome but its LESS integration is two years without an update and Ant Design doesn't help matters with its clunky architecture.

Anyhow, after weeks of fumbling around with it, having all kinds of issues, trying all kinds of solutions and reading A LOT of issues, including some Chinese ones (because Ant Design is Chinese) I managed something I thought would be impossible.

I'm sharing it here because I wanted to help other people going through the same struggle and also because I wanted to pique the attention of Next team. Please, if you read this, consider making integration with other CSS pre-processors a bit easier. 🙂

So, here's my next.config.js with unrelated parts removed:

// [...]

// Fix some issues when loading antd styles.
// https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less
function withAntdStyleFix(nextConfig) {
  return Object.assign({}, nextConfig, {
    webpack(config, opts) {
      if (opts.isServer) {
        const antd = /antd\/.+?\/style.*?/;
        const [original, ...externals] = config.externals;
        config.externals = [
          (context, request, callback) => {
            // If the request matches antd stylesheets
            // skip Next's original resolver and proceed
            // to include the module in the bundle.
            if (antd.test(request)) {
              callback();
            } else {
              original(context, request, callback);
            }
          },
          ...externals,
        ];
        // https://webpack.js.org/loaders/null-loader/
        config.module.rules.unshift({
          test: antd,
          use: "null-loader",
        });
      }

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, opts);
      }
      return config;
    },
  });
}

// next-less is deprecated so we have to provide our own Less loader.
// The thing is Next relies on all sorts of magic in its built-in integration with Sass.
// By magic I mean particular config. to make tree shaking among other features work correctly.
// Since I couldn't find a modern solution I could trust for integrating Less and reimplement
// everything Next does is too much to bother, I decided to put on my smarty pants
// and *steal* the config. mid runtime. I'm sorry.
//
// Anyhow it turned out better than I anticipated since it even
// fixed a few issues I had with my previous solution.
//
function withLess(nextConfig) {
  return Object.assign({}, nextConfig, {
    webpack(config, opts) {
      // First we look up Next's built-in Sass integration and return a clone of it.
      let copyOfSassRule;
      config.module.rules.forEach((rule) => {
        // This probably is bad heuristics but it works for now.
        // The Sass rule looks like this:
        //
        //   { oneOf: [ { test: /\.module\.(scss|sass)$/, ... }, ... ] }
        //
        // Plus there're rules for .css, .scss, .scss inside _document.js, etc.
        // but we skip those for now since they're only for error handling.
        if (rule.oneOf) {
          rule.oneOf.forEach((rule) => {
            if (rule.test) {
              if (rule.test.source === "\\.module\\.(scss|sass)$") {
                copyOfSassRule = cloneDeep(rule);
                return true;
              }
            }
            // Also we need to fix the file-loader to include
            // assets imported from our .less files.
            if (rule.issuer && rule.issuer.test) {
              if (rule.issuer.test.source === "\\.(css|scss|sass)$") {
                rule.issuer.test = /\.(css|scss|sass|less)$/;
              }
            }
          });
          // Push our new rule here just because that's where Next expects CSS loaders to be.
          rule.oneOf.push(copyOfSassRule);
        }
      });

      // Next skip .scss files coming from node_modules, but we
      // need that since we load a bunch of .less files from antd.
      // They do that by pattern matching the issuer of
      // the import, so we simply remove the option.
      delete copyOfSassRule.issuer;

      // Set the module test pattern.
      copyOfSassRule.test = /\.less$/;

      // Swith the sass-loader (last entry) with our less-loader.
      copyOfSassRule.use.splice(-1, 1, {
        loader: "less-loader",
        options: {
          // We use appendData to be able to override antd's styles.
          // Our antd.less file is copied at the end of
          // every .less file being imported from antd.
          appendData: (context) => {
            if (/node_modules\/antd/.test(context.resource)) {
              const stylesheet = path.resolve(`./src/styles/antd.less`);
              context.addDependency(stylesheet);
              return readFileSync(stylesheet);
            }
            return "";
          },
          lessOptions: {
            // Antd requires this.
            javascriptEnabled: true,
          },
        },
      });

      // We can't apply css-modules rules to any `.less` file,
      // instead we only need it on `.module.less` files.
      copyOfSassRule.use.find((loader) => {
        if (loader.loader.indexOf("css-loader") > -1) {
          loader.options.modules.auto = true;
          return true;
        }
      });

      // Next disables built-in Sass integration when it detects custom CSS-like loaders configured.
      // Since we're emulating this built-in mechanism we need to disable the disabler.
      // Fortunately they make it quite easy, for now.
      // @see https://github.com/vercel/next.js/blob/96c3b087011f8395c887666c7593b48e2a85d4a6/packages/next/build/webpack-config.ts#L1130
      config.plugins.find((plugin) => {
        if (plugin.__next_css_remove) {
          delete plugin.__next_css_remove;
          return true;
        }
      });
      config.optimization.minimizer.find((minimizer) => {
        if (minimizer.__next_css_remove) {
          delete minimizer.__next_css_remove;
          return true;
        }
      });

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, opts);
      }
      return config;
    },
  });
}

const nextConfig = {
  // [...]
};

// Reduce configurators to final configuration.
// Order matters! But it's in reverse: first in the list gets evaluated last.
module.exports = [
  withAntdStyleFix,
  withLess,
].reduce((c, f) => f(c), nextConfig);

And also my .babelrc because, yes, babel-plugin-import is still needed for Ant Design to work adequately.

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

What I did was basically hook into Next config mid runtime and duplicate some of the Sass related options and edit it slightly to work with .less files and the LESS loader. I never imagined it would work so well. In development and production, SSR, static build/export, even @font-face rules are working flawlessly without extra loaders. I'm so happy to put it behind me! 😊

Well I hope it helps someone. If you have any questions about this or if I made some mistakes please let me know.

[SolidZORO]

Yes, the official plugin has expired and is no longer applicable to the new version of Next. js.

You can try next-plugin-antd-less , support Next.js v9.5.

---

Since Next.js 9.3 supports sass and css by default, but does not support less.

If you use Next.js > 9.3 and use the official less plugin, you will definitely encounter the following problems.

1. CIL Warning Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

2. Does not support automatic recognition of css modules, e.g. a.module.less and a.less

---

To solve the above problems, my idea is very simple.

1. Find sassModule and copy onec and replace the sass-loader inside with less-loader.

2. Then enable the modules.auto option of css-loader. This can simply match all *.less (no need to match it is *.module.less or *.less), and hand it over to css-loader.

This is the lowest cost way, And CLI will no longer show this disgusting warning. The important thing is that there is Zero Dependency on other Next-Plugins..

[revskill10]

It got error when using your snippet.

error - ./node_modules/antd/lib/button/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../../style/themes/index';
| @import '../../style/mixins/index';
| @import './mixin';

Do you have any repo to test out ? Thanks.