Update Ant Design Examples for New CSS Support (9.2)

import ant-design library throw error

can you provide an example import ant-design use [RFC] css support? thanks. when i use [RFC] css support and import ant-design library, it throw error :

./node_modules/antd/lib/button/style/index.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.

here is my next-config.js

module.exports = {
    experimental: {
      css: true
    },
  }

[mattcarlotta]

@raindecastro Ant-design works by importing all necessary CSS when importing the component. Therefore, if you pass in an option that alters its appearance – like adding the mode=“multiple” option to Select – then the CSS will already be included. Unfortunately, this has the sideEffect of importing other CSS that may not be in use.

The larger problem is that ant-design isn’t a small library (48.3 MB unpacked and about 1.5MB+ packed) and with it are a lot of dependencies. Therefore, lower lighthouse scores are kind of expected when using it. This is one of the main reasons why I’ve slowly migrated away from ant-design to either directly using their react component (rc) dependencies or more recently designing my own UI components.

---

Take a look at these chunk graphs of with-ant-design-less out-of-the-box: Ant-design makes up 2.13MB of 3.11MB (parsed)

---

However… there are two things you can do to reduce the bundle size:

1.) Remove moment locales: config.plugins.push(new IgnorePlugin(/^\.\/locale$/, /moment$/));

2.) Only export icons from @ant-design/icons/dist that you need:

config.resolve.alias = {
  ...config.resolve.alias,
  "@ant-design/icons/lib/dist$": path.resolve(`./icons/index.js`),
};

icons/index.js (if you import other components that require icons, then they’ll need to be manually added to this file)

/**
 * Exports only required ant-design icons (otherwise the entire 500kb library is included)
 *
 */
export { default as CalendarOutline } from "@ant-design/icons/lib/outline/CalendarOutline";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";
export { default as DownOutline } from "@ant-design/icons/lib/outline/DownOutline";
export { default as LeftOutline } from "@ant-design/icons/lib/outline/LeftOutline";
export { default as RightOutline } from "@ant-design/icons/lib/outline/RightOutline";

next.config.js

/* eslint-disable */
const { IgnorePlugin } = require("webpack");
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, "./assets/antd-custom.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",
      });
    } else {
      /* aliases ant icon imports to user-defined icons folder */
      config.resolve.alias = {
        ...config.resolve.alias,
        "@ant-design/icons/lib/dist$": path.resolve(`./icons/index.js`),
      };
      /* strips out moment locales */
      config.plugins.push(new IgnorePlugin(/^\.\/locale$/, /moment$/));
    }
    return config;
  },
});

Take a look at these chunk graphs: Ant-design still makes up 1.2MB of 2.11MB (parsed)

[marcelobaez]

has anybody got working ant design 4 (less) + nextjs 9.2 + avoid conflicting order?