title: next-sass: Flash of unstyled content only when building for production
body: <h1>✅ Solved, see my reply below!</h1>
  
  <p>I'm using Next.js with next-sass. I've been struggling with a flash of unstyled content "FOUC" issue my entire day, testing various solutions I found online, but none seemed to work for me. The issue is especially visible when using CSS transitions, as the components will be visible without any styles and then transition to their CSS style.</p>
  
  <p>This is only visible when building for production using <code>next build</code> and then <code>next start</code>. In development mode, using <code>next</code>, there is no FOUC issue.</p>
  
  <p>Minimal example:</p>
  
  <pre><code>// next.config.js
  const withSass = require('@zeit/next-sass');
  module.exports = withSass();
  </code></pre>
  
  <pre><code>// scss/style.scss
  body {
      background-color: red;
      transition: 2s all ease;
  }
  </code></pre>
  
  <pre><code>// pages/index.js
  import React from "react";
  import "../scss/style.scss";
  
  const Home = () =&gt; (
    &lt;div&gt;Test&lt;/div&gt;
  );
  
  export default Home;
  </code></pre>
  
  <p>GitHub repo: <a href="https://github.com/jesperlindstrom/next-sass-fouc/" rel="nofollow noreferrer">https://github.com/jesperlindstrom/next-sass-fouc/</a></p>
  
  <p>Video of problem: <a href="https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing</a></p>
  
  <p>What am I doing wrong? Thanks!</p>