title: React global SCSS: class styling not working
body: <p>I am using React with SASS.</p>
  
  <p>For my components, I am using modular CSS, however, in my <code>Layout.js</code> file, I want to use a <code>main.scss</code> file.</p>
  
  <p>My <code>main.scss</code>file is working as when I add style to selectors such as <code>body {}</code> or <code>p {}</code>, they style these elements. It's the styles for classes that aren't seeming to come through. For instance, in my <code>global.scss</code> file, I have the following css</p>
  
  <pre><code>body {
    margin: 0;
  }
  .marginsContainer {
    width: 90%;
    margin: auto;
    padding: 100px;
  }
  </code></pre>
  
  <p>The <code>body</code> is working. The <code>.mainContainer</code> isn't.</p>
  
  <p>I am trying to use .mainContainer in my Layout.js file, like so</p>
  
  <pre><code>import Navbar from './Navbar';
  import Head from 'next/head';
  import '../global-styles/main.scss';
  
  const Layout = (props) =&gt; (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;Practise Site&lt;/title&gt;
      &lt;/Head&gt;
      &lt;Navbar /&gt;
      &lt;div className="marginsContainer"&gt;
        {props.children}
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  export default Layout;
  </code></pre>
  
  <p>What might be the problem here?</p>