I just come from the react background and my intention is that I want to use SCSS file at component level like I was using in my react app I don't like the change the next giving some vulgar error:
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).
That error will come out when you name your SCSS file like styles.scss, Next.js will understand that you are defining global styles but you're trying to import them into your components. For example
//component.jsx
import * as S from '../styles.scss' //throw an error in the terminal
According to this document, you have to follow their naming convention for your styles file like styles.module.scss. Next.js will understand that you're importing a module's style file instead.
//component.jsx
import * as S from '../styles.module.scss' //it's good now!
The intention for this naming convention is that Next.js wants to fetch your resources respectively instead of fetching all resources initially, so they put this particular rule for style files.