<p dir="auto"><code class="notranslate">scrollToHash</code> doesn't work as expected.</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">I would expect the anchor to be scrolled to.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Anchor is scrolled to correctly, but quickly after the scroll position is reset to the top of the page.<br>
Increasing the setTimeout value fixes the issue but seems brittle.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Add anchor to url</li>
<li>Visit page</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>4.2.3</td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td>MacOS</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 64</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I am using your <a href="https://github.com/zeit/next.js/blob/master/examples/with-scoped-stylesheets-and-postcss/pages/index.js">CSS example</a> to add postcss to my project but unless I put my css inside the <code class="notranslate">./pages</code> folder I get an undefined error.</p>
<p dir="auto"><code class="notranslate">import {stylesheet, classNames} from 'css/styles.css'</code></p>
<p dir="auto">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.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">For the <code class="notranslate">paragraph</code> class from <code class="notranslate">styles</code> to render.</p>
<p dir="auto"><code class="notranslate">.paragraph { composes: font-color from 'global.css'; font-size: 20px; color:red; }</code></p>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR  Failed to compile with 1 errors    

This dependency was not found:

* css/styles.css in ./pages?entry

To install it, you can run: npm install --save css/styles.css"><pre class="notranslate"><code class="notranslate">ERROR  Failed to compile with 1 errors    

This dependency was not found:

* css/styles.css in ./pages?entry

To install it, you can run: npm install --save css/styles.css
</code></pre></div>
<h1 dir="auto">My next.config.js file is as follows:</h1>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const fs = require('fs')
const trash = require('trash')

module.exports = {
  webpack: (config) =&gt; {
    config.plugins = config.plugins.filter(
      (plugin) =&gt; (plugin.constructor.name !== 'UglifyJsPlugin')
    )

    config.module.rules.push(
      {
        test: /\.css$/,
        use: [
          {
            loader: 'emit-file-loader',
            options: {
              name: 'dist/[path][name].[ext]'
            }
          },
          {
            loader: 'skeleton-loader',
            options: {
              procedure: function (content) {
                const fileName = `${this._module.userRequest}.json`
                const classNames = fs.readFileSync(fileName, 'utf8')

                trash(fileName)

                return ['module.exports = {',
                  `classNames: ${classNames},`,
                  `stylesheet: \`${content}\``,
                  '}'
                ].join('')
              }
            }
          },
          'postcss-loader'
        ]
      }
    )

    return config
  }
}"><pre class="notranslate"><code class="notranslate">const fs = require('fs')
const trash = require('trash')

module.exports = {
  webpack: (config) =&gt; {
    config.plugins = config.plugins.filter(
      (plugin) =&gt; (plugin.constructor.name !== 'UglifyJsPlugin')
    )

    config.module.rules.push(
      {
        test: /\.css$/,
        use: [
          {
            loader: 'emit-file-loader',
            options: {
              name: 'dist/[path][name].[ext]'
            }
          },
          {
            loader: 'skeleton-loader',
            options: {
              procedure: function (content) {
                const fileName = `${this._module.userRequest}.json`
                const classNames = fs.readFileSync(fileName, 'utf8')

                trash(fileName)

                return ['module.exports = {',
                  `classNames: ${classNames},`,
                  `stylesheet: \`${content}\``,
                  '}'
                ].join('')
              }
            }
          },
          'postcss-loader'
        ]
      }
    )

    return config
  }
}
</code></pre></div>
<p dir="auto">The only time this works is if I add all the CSS files inside the <code class="notranslate">./pages</code> directory which I find will become messy and bloated. I am using React.js with Next.js. I presume the same problems will arise if I add an <code class="notranslate">./assets</code> folder at the same level as <code class="notranslate">./pages</code>. How can I keep the file types separated and/or for <code class="notranslate">&lt;style dangerouslySetInnerHTML={{__html: stylesheet}} /&gt;</code> to render an external stylesheet instead of styles?</p>