title: FOUC: Initial page loaded without any styles
body: <p>I'm trying to apply global styles by importing <code>.scss</code> files in <code>_app.js</code> for a Nextjs app.</p>
  <p>But the issue is, styles are not getting pre-applied on page load. Because of which FOUC happens for all the initial page render.</p>
  <h3>Example 1</h3>
  <p>Given below is a basic version of the issue mentioned above:</p>
  <p>Project structure:</p>
  <pre><code>pages/
      _app.js
      index.js
  app.scss
  package.json
  </code></pre>
  <p><em>index.js</em> file:</p>
  <pre><code>export default function Home() {
    return (
      &lt;div className=&quot;hello&quot;&gt;
        &lt;p&gt;Hello World&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><em>_app.js</em> file:</p>
  <pre><code>import &quot;../app.scss&quot;;
  
  export default function App({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;;
  }
  </code></pre>
  <p><em>app.scss</em> file:</p>
  <pre><code> $color: red;
  
   .hello {
       background-color: lavender;
       padding: 100px;
       text-align: center;
       transition: 100ms ease-in background;
  
       &amp;:hover {
           color: $color;
       }
   }
  </code></pre>
  <p><em>package.json</em> file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;basic-css&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;next&quot;: &quot;^9.4.5-canary.31&quot;, // using canary build as per https://github.com/vercel/next.js/issues/11195
      &quot;node-sass&quot;: &quot;4.14.1&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;
    },
    &quot;license&quot;: &quot;ISC&quot;
  }
  </code></pre>
  <h3>Example 2 (<a href="https://github.com/raulsrule/fouc" rel="nofollow noreferrer">repo using next-sass</a>)</h3>
  <p>As per the 3rd point of @Ramakay's <a href="https://stackoverflow.com/a/62836967/6611487">answer</a>
  Which creates a static hashed css file and appends it to <code>&lt;head/&gt;</code> tag but still the issue persists.</p>
  <hr />
  <p>What I am expecting:</p>
  <p><a href="https://i.stack.imgur.com/kHmLl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kHmLl.png" alt="enter image description here" /></a></p>
  <p>What I'm getting now:</p>
  <p><a href="https://i.stack.imgur.com/9mMC3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9mMC3.png" alt="enter image description here" /></a></p>
  <p>I'm not using any external library like &quot;styled-components&quot; etc. And I'm not looking for it.</p>
  <p>What can I do to fix the issue at hand?</p>