<p dir="auto">Please add some document why we  add following configuration to less. check <a href="https://github.com/zeit/next.js/issues/7957#issuecomment-563046084" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7957/hovercard">https://github.com/zeit/next.js/issues/7957</a> for details, I also create a <a href="https://github.com/videni/with-ant-design-less">reproduction demo</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];
   

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }"><pre class="notranslate"><code class="notranslate">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] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];
   

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }
</code></pre></div>
<ol dir="auto">
<li>Why less files of <code class="notranslate">Antd</code> matching <code class="notranslate">/antd\/.*?\/style.*?/</code>  are excluded  from server webpack?</li>
<li>Why they are excluded by webpack externals option,  exclude them again by null-loader?</li>
<li>Since they are excluded why they are still loaded?  that is why I have following error.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/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.&lt;computed&gt; [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.&lt;anonymous&gt; (/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.&lt;computed&gt; [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.&lt;anonymous&gt; (/Users/john/www/acme-admin-ui/node_modules/@ant-design/pro-layout/lib/BasicLayout.js:10:1)"><pre class="notranslate"><code class="notranslate">/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.&lt;computed&gt; [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.&lt;anonymous&gt; (/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.&lt;computed&gt; [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.&lt;anonymous&gt; (/Users/john/www/acme-admin-ui/node_modules/@ant-design/pro-layout/lib/BasicLayout.js:10:1)
</code></pre></div>
<p dir="auto">@ant-design/pro-layout/lib/BasicLayout.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

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

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

require(&quot;antd/lib/layout/style&quot;); //@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 &quot;@import&quot; should not be resolved.

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

require(&quot;./BasicLayout.less&quot;);"><pre class="notranslate"><code class="notranslate">"use strict";

function _typeof(obj) { if (typeof Symbol === "function" &amp;&amp; typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj &amp;&amp; typeof Symbol === "function" &amp;&amp; obj.constructor === Symbol &amp;&amp; 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");
</code></pre></div>
<p dir="auto">I did everything as the example, it doesn't work in my enviroment, I search several hours, still don't figure out.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Asset files in <code class="notranslate">static</code> fold should be available on URL <code class="notranslate">http://hostname/static/filename</code>. For example, file <code class="notranslate">static/hello.txt</code> should be accessible by URL <code class="notranslate">http://hostname/static/hello.txt</code>.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Requesting static file gets a 404 page.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Create minimal next app with <code class="notranslate">next.js</code> v2.4.8</li>
<li>add one txt file <code class="notranslate">foo.txt</code> in <code class="notranslate">static</code> folder</li>
<li>Try to access this txt file in browser by <code class="notranslate">http://localhost/static/foo.txt</code>.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">This bug happens in v2.4.8 but not in v2.4.7. It looks this bug is introduced by <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/vercel/next.js/commit/c03c86ee5e316ab3672101209f17677c5e6ca9f6/hovercard" href="https://github.com/vercel/next.js/commit/c03c86ee5e316ab3672101209f17677c5e6ca9f6"><tt>c03c86e</tt></a> . The build actually fails but it is still published as v2.4.8.</p>
<p dir="auto">For the time being, I have to lock version on 2.4.6 or 2.4.7.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>2.4.8</td>
</tr>
<tr>
<td>node</td>
<td>v6.9.2</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS 10.12.5 (16F73)</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 59</td>
</tr>
</tbody>
</table>