Global CSS cannot be imported from files other than your Custom <App>

Question

I'm getting the following error:

./styles/globals.scss
Global CSS cannot be imported from files other than your Custom <App>. 
Due to the Global nature of stylesheets, and to avoid conflicts, 
Please move all first-party global CSS imports to pages/_app.js. 
Or convert the import to Component-Level CSS (CSS Modules).

Read more: https://nextjs.org/docs/messages/css-global
Location: pages/_app.tsx

And this error disappears when I commented out the following lines in the _app.tsx

// import "@styles/globals.scss";

But noticed that the stylesheet isn't being applied. Any ideas how to fix this?

Here's the output of my npm list

 $ npm list --depth 0
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

 $ npm list -g --depth 0
/Users/glaksmono/.nvm/versions/node/v16.8.0/lib
└── [email protected]

Answer 1

apparently there is a breaking change with [email protected] on windows. Downgrade to [email protected] to fix this issue.

Source: https://stackoverflow.com/a/68992114/12198209