Add document to with-ant-design-less example

Please add some document why we add following configuration to less. check https://github.com/zeit/next.js/issues/7957 for details, I also create a reproduction demo

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',
      });
    }

1. Why less files of Antd matching /antd\/.*?\/style.*?/ are excluded from server webpack?
2. Why they are excluded by webpack externals option, exclude them again by null-loader?
3. Since they are excluded why they are still loaded? that is why I have following error.

/Users/john/www/acme-admin-ui/node_modules/antd/lib/style/index.less:1
@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Object.require.extensions.<computed> [as .js] (/Users/john/www/acme-admin-ui/node_modules/ts-node/src/index.ts:529:44)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/john/www/acme-admin-ui/node_modules/antd/lib/layout/style/layout/style/index.jsx:1:1)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Object.require.extensions.<computed> [as .js] (/Users/john/www/acme-admin-ui/node_modules/ts-node/src/index.ts:529:44)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/john/www/acme-admin-ui/node_modules/@ant-design/pro-layout/lib/BasicLayout.js:10:1)

@ant-design/pro-layout/lib/BasicLayout.js

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/layout/style"); //@ant-design/pro-layout/lib/BasicLayout.js:10:1. this line requires layout style which is supposed to be excluded by webpack,  `antd/lib/layout/style` matches the regular expression above,  so "@import" should not be resolved.

var _layout = _interopRequireDefault(require("antd/lib/layout"));

require("./BasicLayout.less");

I did everything as the example, it doesn’t work in my enviroment, I search several hours, still don’t figure out.

[Lpmvb]

try this

const cssLoaderGetLocalIdent = require('css-loader/lib/getLocalIdent.js');
module.exports = withLess({
  // other config
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
    getLocalIdent: (context, localIdentName, localName, options) => {
      const hz = context.resourcePath.replace(context.rootContext, '');
      if (/node_modules/.test(hz)) {
        return localName;
      }
      return cssLoaderGetLocalIdent(
        context,
        localIdentName,
        localName,
        options,
      );
    },
  },
}

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.