How to implement Global Styles in NextJS with SCSS?

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.

• I am using SCSS as my styling language, and TSX for my nextjs files.
• My scoped styles are getting applied.

My Code

_App.tsx

import "../components/SCSS/variables/AllVariables.global.scss";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

AllVariables.global.scss

@use "./breakpoints" as *;
@use "./changeable-settings" as *;
@use "./fixed-settings-color" as *;
@use "./fixed-settings-font" as *;
@use "./fixed-settings-grid" as *;
@use "./headings" as *;
@use "./zindex" as *;

Two examples from the files that are being imported into AllVariables.global.scss:

$sm: 600px; // tablet
$md: 900px; // laptop
$lg: 1200px; // desktop
$xl: 1500px; // large desktop
$xxl: 3000px; // 4K desktop

: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;
}

I followed the Instruction from the documentation, where it states that SCSS is being handled the same as CSS. I did install sass, as it was mentioned. And here it is also explained, the same way, how to import global styles, and here as well.

In these examples, they use CSS and JS, and again, I use SCSS and TSX.

In my opinion, it should 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.