title: How to import SCSS on Component Level with Next.js
body: <p>I am coming from a CRA background and working my way through Next.js version 9.4.2</p>
  <p>My project tree looks something like this :-</p>
  <pre><code>pages/
      _app.tsx
      index.tsx
  components/
      Navbar/
          index.ts
          Navbar.tsx
          Navbar.scss
  </code></pre>
  <p>Inside my <code>Navbar.tsx</code> I have a statement <code>import './Navbar.scss';</code></p>
  <p>This gives me the following error :-</p>
  <pre><code>./src/components/Navbar/Navbar.scss
  Global CSS cannot be imported from files other than your Custom &lt;App&gt;. Please move all global CSS imports to src/pages/_app.tsx.
  Read more: https://err.sh/next.js/css-global
  Location: src/components/Navbar/Navbar.tsx
  </code></pre>
  <p>The error, as mentioned, goes away if I move the <code>import Navbar.scss</code> statement to <code>pages/_app.tsx</code></p>
  <p>I know I can switch to <code>Navbar.module.scss</code>, but I don't want to go down the route of modular scss as I expect my scss to get complex I would like to stick to the manner in which I write my scss and not keep finding work arounds to issues that might arise later. I am open to being convinced here but I have not found good read ups on this to choose it as my path.</p>
  <p>So by the looks if it, I am stuck with importing all <code>&lt;component&gt;.scss</code> files in <code>_app.tsx</code>. This will leave me with a long list of <code>&lt;component&gt;.scss</code> imports in my <code>_app.tsx</code> and I will also be left with a lot of <code>&lt;component&gt;.scss</code> files for Components that might conditionally not render.</p>
  <p>What are my options here ?</p>