<p dir="auto">I am compiling SCSS and externalizing the resulting CSS into a file using sass-loader and extract-text-webpack-plugin in next.config.js. The compiled CSS file is being emitted into the .next folder. I also have some static resources, i.e. images and fonts that I'm referencing in the stylesheet. These static resources are also being compiled into the .next folder using the file-loader plugin in next.config.js.</p>
<p dir="auto">However, when the page loads in the browser, I get a 404 on these resources because NextJS seems to prepend their paths with a <code class="notranslate">/_next/webpack/</code> in the compiled CSS file:</p>
<p dir="auto"><code class="notranslate">http://54.197.22.181/_next/webpack/52a802f51895f840821c1083434f3d84.ttf</code></p>
<p dir="auto">Is there any workaround to this issue? I really need to use SASS and keep the compiled CSS as an external file as against embedded style. So, the CSS-in-JS model isn't what I'm comfortable with.</p>
<p dir="auto">For reference, my project is hosted at <a href="https://github.com/amitsch666/nano">https://github.com/amitsch666/nano</a>.</p>
<p dir="auto">Here's the relevant rule I have in my next.config.js:</p>
<p dir="auto"><code class="notranslate">{ test: /\.(ttf|eot|png)$/, loader: 'file-loader' }</code></p>
<p dir="auto">Here's the font declaration in my scss file:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@font-face {
	font-family: 'Lemonada';
	src: url('../static/fonts/Lemonada/Lemonada-Regular.ttf');
	src: url('../static/fonts/Lemonada/Lemonada-Bold.ttf');
	src: url('../static/fonts/Lemonada/Lemonada-SemiBold.ttf');
	src: url('../static/fonts/Lemonada/Lemonada-Light.ttf');
}"><pre class="notranslate"><code class="notranslate">@font-face {
	font-family: 'Lemonada';
	src: url('../static/fonts/Lemonada/Lemonada-Regular.ttf');
	src: url('../static/fonts/Lemonada/Lemonada-Bold.ttf');
	src: url('../static/fonts/Lemonada/Lemonada-SemiBold.ttf');
	src: url('../static/fonts/Lemonada/Lemonada-Light.ttf');
}
</code></pre></div>
<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>
<p dir="auto"><strong>Update:</strong> I have managed to make my site work by routing all <code class="notranslate">_next/webpack/static/</code> requests to <code class="notranslate">/.next/static</code> in my Express middleware. However, this still seems a tad hackish to me and would love to hear if someone has a more "standard" solution.</p>
<p dir="auto">Production mode works as expected. Running the example in development mode does not build the <code class="notranslate">common.js</code> file.</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">Both <code class="notranslate">main.js</code> and I expect <code class="notranslate">common.js</code> to exist in the <code class="notranslate">/.next</code> directory in development mode.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">In the browser console:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="GET http://localhost:3000/_next/-/commons.js net::ERR_ABORTED
[HMR] connected
GET http://localhost:3000/_next/-/commons.js 404 (Not Found)"><pre class="notranslate"><code class="notranslate">GET http://localhost:3000/_next/-/commons.js net::ERR_ABORTED
[HMR] connected
GET http://localhost:3000/_next/-/commons.js 404 (Not Found)
</code></pre></div>
<p dir="auto">I have checked in the <code class="notranslate">.next</code> directory and it's definitely not there.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li><code class="notranslate">curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/using-preact</code></li>
<li><code class="notranslate">cd using-preact</code></li>
<li><code class="notranslate">npm i</code></li>
<li><code class="notranslate">npm run dev</code></li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I am unable to run <a href="https://github.com/zeit/next-plugins/tree/master/packages/next-preact">next-preact</a> or the current <a href="https://github.com/zeit/next.js/tree/canary/examples/using-preact">with-preact example</a> in development mode.</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>5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS 10.13.3</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 63.0.3239.132</td>
</tr>
</tbody>
</table>