CSS Not Loading In Next.js App - A Potential Fix

I’ve been working on a Next.js project for a few weeks and have been experiencing intermitent issues with page CSS not being loaded when the page is refreshed. I tried a few different things but didn’t have much success. I sort of hoped the problem would go away when I made a production build but no such luck.

I eventually found this issue which pointed me in the right direction. A few differences in my case from the issue described in the link is (a) I’m using node-sass, not next-css and (b) it happens to me in development as well as production. Still, the suggested fix seems to have worked for me.

In short, I was importing my .scss file in the wrong component. It should be imported in _app.js.

  
    import App, { Container } from 'next/app';
    import Page from '../components/Page';

    /**
    This import of the .scss file was originally in the components/Page
    file. Moving it here was the magic fix!
    **/
    import '../static/scss/theme.scss';

    class MyApp extends App {
      render() {
        const { Component } = this.props;

        return (
          <Container>
            <Page>
              <Component />
            </Page>
          </Container>
        );
      }
    }

    export default MyApp;
  

Cheers!