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/react@17.0.20
├── eslint-config-next@11.1.2
├── eslint@7.32.0
├── next@11.1.2
├── react-dom@17.0.2
├── react@17.0.2
├── sass@1.39.0
└── typescript@4.4.2

 $ npm list -g --depth 0
/Users/glaksmono/.nvm/versions/node/v16.8.0/lib
└── npm@7.22.0

Answer 1

I was having the same issue, and I think the problem was that all of my code was being SmartSynced to Dropbox. As soon as I ran create-next-app in a folder that wasn't aliased into the Dropbox directory, everything worked fine. My suspicion is that Node/Webpack was seeing the wrong path because of the aliasing and that caused the error.

Answer 2

apparently there is a breaking change with next@11.1.1 on windows. Downgrade to next@11.1.0 to fix this issue.

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