title: How to import Sass modules in Next.js components
body: <p>With the latest Next.js I can import Sass styles globally in <code>pages/_app.js</code> with a directive like <code>import '../styles/global.scss';</code> and without depending on <code>@zeit/next-sass</code>.</p>
  <p>Does this work at the component level? For example, can I have a <code>components/*</code> directory where I keep my components, and each component has a <code>*.tsx</code> file that imports a <code>*.module.scss</code> file?</p>
  <p>That's not working for me right now. I don't get errors but component-level styles don't load while the global styles do.</p>
  <p>Edit: To be clear, I do <em>not</em> want to import an object like <code>import styles from ...scss</code>. I simply want to import Sass for this component, not any object that has properties.</p>
  <p>Here's a code example where I can see the <code>globals.scss</code> styles but not the <code>Main.module.scss</code> styles when I run it with <code>npx run dev</code>.</p>
  <p>From scratch I ran <code>npx create-next-app _</code> and then <code>npm install sass</code>. There are only five important files, once I make a simple <code>Main</code> component that I want to style:</p>
  <ul>
  <li><code>components/Main/Main.tsx</code> :</li>
  </ul>
  <pre><code>import './Main.module.scss';
  
  export default function Main() {
    return &lt;div className=&quot;Main&quot;&gt;Main&lt;/div&gt;;
  };
  </code></pre>
  <ul>
  <li><code>components/Main/Main.module.scss</code> :</li>
  </ul>
  <p>This rule is not applied for some reason!</p>
  <pre><code>.Main {
      color: blue;
  }
  </code></pre>
  <ul>
  <li><code>pages/_app.js</code> :</li>
  </ul>
  <p>These global styles do get applied!</p>
  <pre><code>import '../styles/globals.scss';
  
  export default function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;
  };
  </code></pre>
  <ul>
  <li><code>pages/index.js</code> :</li>
  </ul>
  <pre><code>import Head from 'next/head';
  import Main from '../components/Main/Main';
  
  export default function Home() {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
  
        &lt;Main /&gt;
  
      &lt;/div&gt;
    )
  };
  </code></pre>
  <ul>
  <li><code>styles/globals.scss</code> :</li>
  </ul>
  <p>This style rule is applied but not <code>color: blue</code> above.</p>
  <pre><code>* {
    box-sizing: border-box;
  }
  </code></pre>