title: Next.js - React SSR Cannot find module './page.scss' when rendering on the server (client side rendered works fine after saving the file)
body: <p>When you're using the <code>create-react-app</code> package you're able to have <code>.scss</code>-files compiled into <code>.css</code>-files as you type in them. You can then do <code>import './Header.css';</code> in your React component files and the styles are applied. It's easy to use your dev-tools and see where the styles are coming from.</p>
  
  <p>Next.js tried to get everyone to use Styled-JSX to have your stylesheets inline inside your JSX files, similar to how web components (or Polymer) do it. I personally strongly dislike that approach.</p>
  
  <p>Other problems:</p>
  
  <ul>
  <li>Styled-JSX isn't supported in my IDE (Webstorm) (even the work-around looks awful);</li>
  <li>Styled-JSX isn't supported in my dev-tools (Chrome) - there is no reference to what line the style is defined at;</li>
  <li>It makes my source code look like a garbled mess;</li>
  <li>How do I include 3rd party CSS solutions with Styled-JSX? Am I now supposed to add a <code>&lt;link&gt;</code> to my <code>&lt;head&gt;</code>? For everything external? How is that optimal usage of bandwidth? Referencing to files inside of <code>node_modules</code> feels awkward and bad, too.</li>
  </ul>
  
  <p>So, just add rules to <code>next.config.js</code>, right?</p>
  
  <pre><code>module.exports = {
      webpack: (config, { dev }) =&gt; {
          config.module.rules.push(
              {
                  test: /\.(css|scss)/,
                  loader: "style-loader!css-loader"
              }
          );
          return config
      }
  };
  </code></pre>
  
  <p>And then just <code>import './Page.scss';</code> (Don't worry, it's valid CSS, not even SASS yet, I know I did not include the sass-loader here just yet. I try to keep it simple first.)</p>
  
  <ol>
  <li>Refresh the page (Server Side Rendered): does NOT work;</li>
  <li>Save the file (dynamically loaded after saving the file): it does work (until you reload the page);</li>
  <li>Keeps complaining the <a href="https://www.google.co.uk/search?q=cannot+find+module+scss+webpack" rel="noreferrer">file can't be found</a>, plenty of Google hits there, too. No real solutions that work today.</li>
  </ol>
  
  <p>So, why doesn't it work with SSR?</p>