title: How to implement Global Styles in NextJS with SCSS?
body: <p>I want to use Global Styles in my NextJS Application. According to the Documentation, the way I wrote my code should be correct. But it's not getting applied to.</p>
  <ul>
  <li>I am using SCSS as my styling language, and TSX for my nextjs files.</li>
  <li>My scoped styles are getting applied.</li>
  </ul>
  <h2>My Code</h2>
  <p><code>_App.tsx</code></p>
  <pre><code>import &quot;../components/SCSS/variables/AllVariables.global.scss&quot;;
  
  export default function App({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;
  }
  </code></pre>
  <p><code>AllVariables.global.scss</code></p>
  <pre><code>@use &quot;./breakpoints&quot; as *;
  @use &quot;./changeable-settings&quot; as *;
  @use &quot;./fixed-settings-color&quot; as *;
  @use &quot;./fixed-settings-font&quot; as *;
  @use &quot;./fixed-settings-grid&quot; as *;
  @use &quot;./headings&quot; as *;
  @use &quot;./zindex&quot; as *;
  </code></pre>
  <p>Two examples from the files that are being imported into <code>AllVariables.global.scss</code>:</p>
  <pre><code>$sm: 600px; // tablet
  $md: 900px; // laptop
  $lg: 1200px; // desktop
  $xl: 1500px; // large desktop
  $xxl: 3000px; // 4K desktop
  </code></pre>
  <pre><code>:root {
    /* [Font Settings] */
    --xs-font-size: 0.6rem;
    --sm-font-size: 0.8rem;
    --reg-font-size: 1rem;
    --md-font-size: 1.2rem;
    --lg-font-size: 1.4rem;
    --xl-font-size: 1.6rem;
  }
  </code></pre>
  <p>I followed the Instruction from the <a href="https://nextjs.org/docs/basic-features/built-in-css-support#sass-support" rel="nofollow noreferrer">documentation</a>, where it states that SCSS is being handled the same as CSS. I did install <code>sass</code>, as it was mentioned. And <a href="https://www.netlify.com/blog/2020/12/09/global-styles-in-next.js/" rel="nofollow noreferrer">here</a> it is also explained, the same way, how to import global styles, and <a href="https://github.com/vercel/next.js/discussions/17089" rel="nofollow noreferrer">here as well</a>.</p>
  <p>In these examples, they use CSS and JS, and again, I use SCSS and TSX.</p>
  <p>In my opinion, it <em>should</em> work, but obviously, it doesn't. Something is wrong, and I can't find any official source on how to achieve global styles with SCSS.</p>