<p dir="auto">I'm using next.js with a custom express server. After building next.js, my custom endpoints (such as /graphiql) aren't reachable anymore, and instead the next.js 404 page appears.</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>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">After running <code class="notranslate">next build</code> and then <code class="notranslate">export NODE_ENV=prod &amp;&amp; node --harmony-async-await index.js</code> it should behave like <code class="notranslate">next dev</code>, i.e. have access to the registered endpoints.</p>
<h3 dir="auto">Buggy behavior</h3>
<p dir="auto">If I visit /graphiql I get the 404 screen.</p>
<h3 dir="auto">Steps</h3>
<p dir="auto">The startup code looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const dev = process.env.NODE_ENV !== 'prod'

const start = async () =&gt; {
    const app = express()

    // &lt;- register other express handlers such as /graphql, /graphiql and other endpoints

    const nextApp = next({
        dev
    })
    const handle = nextApp.getRequestHandler()
    await nextApp.prepare()

    app.get('*', (req, res) =&gt; {
        return handle(req, res)
    })

    await app.listen(settings.port)

    console.log(`Online at ${settings.url}:${settings.port}`)
}"><pre class="notranslate"><code class="notranslate">const dev = process.env.NODE_ENV !== 'prod'

const start = async () =&gt; {
    const app = express()

    // &lt;- register other express handlers such as /graphql, /graphiql and other endpoints

    const nextApp = next({
        dev
    })
    const handle = nextApp.getRequestHandler()
    await nextApp.prepare()

    app.get('*', (req, res) =&gt; {
        return handle(req, res)
    })

    await app.listen(settings.port)

    console.log(`Online at ${settings.url}:${settings.port}`)
}
</code></pre></div>
<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>3.0.1-beta.13</td>
</tr>
<tr>
<td>node</td>
<td>v7.5.0</td>
</tr>
<tr>
<td>OS</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<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">Hello guys!</p>
<p dir="auto">First things first: thanks a lot to the contributors for the framework : )</p>
<p dir="auto">I'm contacting because I'm having hard times trying to hot-reload the .sass on this example: <a href="https://github.com/zeit/next.js/tree/v3-beta/examples/with-external-scoped-css">https://github.com/zeit/next.js/tree/v3-beta/examples/with-external-scoped-css</a></p>
<p dir="auto">My goal is to have a folder per component / page, with a hot-reloaded js and scss file, using scoped css, and without adding <code class="notranslate">&lt;style dangerouslySetInnerHTML /&gt;</code> on every component or without using template string kind of css technology as style-jsx or styled-components.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="components
├── comp1
│   ├── index.js
│   └── styles.scss
├── comp2
│   ├── index.js
│   └── styles.scss
└── comp3
    └── index.js
    └── styles.scss"><pre class="notranslate"><code class="notranslate">components
├── comp1
│   ├── index.js
│   └── styles.scss
├── comp2
│   ├── index.js
│   └── styles.scss
└── comp3
    └── index.js
    └── styles.scss
</code></pre></div>
<p dir="auto">So the thing is that there's a related PR mentioned in the example as a potential fix for the hot-reloading ( <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="201722614" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/823" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/823/hovercard" href="https://github.com/vercel/next.js/pull/823">#823</a>), and I was wondering if anybody has any example / tip on how the functionality added by the PR could be used to customize the hot-reloading so the changes on the sass are also detected and injected.</p>
<p dir="auto">I have tried and tested a lot without success, including the approached on <a href="https://github.com/zeit/next.js/issues/544" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/544/hovercard">this thread</a>, but none is fitting completely what I want to achieve, so any help would be really appreciated.</p>
<p dir="auto">Thanks a lot in advance!!</p>