<p dir="auto">This is very simple react component run from 'pages/index.js' (sorry, but I don't know why the code is not formatted properly in this example).</p>
<p dir="auto">If I change input value to, say, 'click Me' then the page is HMR'ed and changes are immediately reflected in the browser. However, if I change <code class="notranslate">console.log</code> in the <code class="notranslate">handler()</code> to, say, 'some other message' then changes are not reflected in the browser and I have to do a hard refresh to pick up the changes. I would think that this change should be picked up but I could be wrong and it's normal.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default class Test extends React.Component {
    handler = () =&gt; { console.log('some message')}
    render () {
      return ( &lt;input type=&quot;button&quot; value=&quot;click&quot; onClick={this.handler} /&gt;) 
   }
}"><pre class="notranslate"><code class="notranslate">export default class Test extends React.Component {
    handler = () =&gt; { console.log('some message')}
    render () {
      return ( &lt;input type="button" value="click" onClick={this.handler} /&gt;) 
   }
}
</code></pre></div>


<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>

<p dir="auto">If I change <code class="notranslate">console.log('message')</code> to <code class="notranslate">console.log('some message')</code> and save the file and click the button then I would expect this changes to be picked up by HMR and see 'some message' in the browser's console output</p>

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

<p dir="auto">I don't see these changes and I have to do a hard refresh in order to see them in the browser.</p>

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


<ol dir="auto">
<li>Just run the sample code provided and change variables as described.</li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">It's not affecting me in any meaningful way. I can do a hard refresh if that's by design.</p>

<h2 dir="auto">Your Environment</h2>

<ul dir="auto">
<li>Next.js version: 3.0.1-beta.8</li>
<li>Environment name and version (e.g. Chrome 39, Node.js 5.4): Node 8.x, NPM 5</li>
<li>Operating System (Linux, maxOS, Windows): OSX Sierra</li>
</ul>
<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I want to expect styles from my modules to be compiled into the same stylesheet as my global styles. Please see demo setup below to understand where styles are being pulled from.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="├── pages
│   ├── index.js
├── components
│   ├── Button
│   │   ├── index.js
│   │   ├── index.sass
├── styles
│   ├── index.sass (Global stylesheet with @imports)"><pre class="notranslate"><code class="notranslate">├── pages
│   ├── index.js
├── components
│   ├── Button
│   │   ├── index.js
│   │   ├── index.sass
├── styles
│   ├── index.sass (Global stylesheet with @imports)
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Can't get both modules and global styles to work together in parallel. Only one of them can be used while the other cannot. Please see my comments in <a href="https://github.com/numieco/tortuga/tree/demo">this demo repo</a> in the files, <code class="notranslate">_document.js</code>  and <code class="notranslate">styles/index.sass</code></p>
<h2 dir="auto">Steps to Reproduce</h2>


<ol dir="auto">
<li>Clone <a href="https://github.com/numieco/tortuga/tree/demo">this repo</a></li>
<li><code class="notranslate">yarn &amp;&amp; yarn dev</code></li>
<li>View comments in <code class="notranslate">_document.js</code> and <code class="notranslate">styles/index.sass</code> to turn on and off behaviors.</li>
<li>If you inspect the styles you'll see that the global styles are only being applied.</li>
<li>Comment out line 5 in <code class="notranslate">_document.js</code>, save, and you'll notice that module styles will be applied but not the global styles.</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">As stated in the above, I want the ability to use SASS modules within my <code class="notranslate">components</code> folder AND global styles in my <code class="notranslate">styles</code> folder together. As of right now I can either have styles from modules and NOT from my global stylesheet OR have styles from global stylesheet and not my modules.</p>
<p dir="auto">The only work around I've found is including the path of a component's style inside my <code class="notranslate">styles/index.sass</code> file, like so:</p>
<p dir="auto"><code class="notranslate">@import '../components/Button/index'</code></p>
<p dir="auto">The only issue with this is that the global stylesheet is imported into the <code class="notranslate">_document.js</code> and therefore reloads the page on save for those styles intstead of injecting those changes. That's not the biggest deal in the world, but not ideal.</p>
<p dir="auto">I'm not sure if the issue is due to the way modules and <code class="notranslate">_document.js</code> work together, or if there needs to be a specific way to allow this within the <code class="notranslate">next.config.js</code> setup.</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>6.0.0-canary.4</td>
</tr>
</tbody>
</table>
<p dir="auto">Issue is persistant for stable releases too.</p>