Next.js Global CSS cannot be imported from files other than your Custom

Use the built-in Next.js CSS loader (see here)
instead of legacy @zeit/next-sass.

1. Replace @zeit/next-sass package with sass.
2. Remove next.config.js. Or do not change CSS loading in it.
3. Move the global CSS as suggested in the error message.

Since Next.js 9.2 global CSS must be imported in Custom <App> component.

// pages/_app.js

import '../global-styles/main.scss'

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

To add styles only to a specific component or page you can use built-in support of CSS modules. (see here)

For example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.