<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">The with-ant-design-less example is lack off hot reloading and client-side rendering for css</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<p dir="auto">Hot reloading problem:</p>
<ol dir="auto">
<li>Go to 'asserts/antd-custom.less'</li>
<li>Change the primary color</li>
<li>Save</li>
<li>The new primary color is not applied via hot reloading</li>
</ol>
<p dir="auto">Client-side rendering for css:</p>
<ol dir="auto">
<li>Create a new page called "test.js" and less file called "test.less" then define simple css in it (e.g p {color: red})</li>
<li>Import style "test.less" file into "test.js" and define a paragrah tag for testing</li>
<li>Create a Link component inside index page to navigate to test page</li>
<li>When navigating from index.js to test.js, although the test.less is merged into style.css file in /_next/static/style.css, the paragraph tag was not applied red color . If I refresh the test page, everything works fine</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I really appreciate if anyone can tell me the appropriate way to use Ant design in Next.js with custom less style with hot reloading, client-side rendering by answering the questions below:</p>
<ol dir="auto">
<li>What should I use to create an Ant Design Layout for all pages (the new implementation _app.js or _document.js?). I've tried to use this <a href="https://github.com/aoc/with-ant-design-custom-theme">example</a> (using _document.js and add ant design style into <code class="notranslate">style</code> tag), but the ant design icon part not working.</li>
<li>I want to import .less style for each page, e.g pageA has pageA.less ,page B has pageB.less, how can I do that ?</li>
</ol>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: [e.g. Ubuntu]</li>
<li>Browser (if applies) [e.g. chrome]</li>
<li>Version of Next.js: [e.g. 6.0.3]</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> 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>


<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<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></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>