Next.js在_app.tsx引入全局SCSS报Global CSS错误如何解决？

• 第一步：排查全局样式的导入位置
  确认整个项目中仅在pages/_app.tsx文件中导入globals.scss，其他页面、组件文件中如果存在该全局样式的导入语句，全部删除。
• 第二步：修正路径配置
  如果使用@styles别名导入，需要先确保别名配置正确：
  在项目根目录的tsconfig.json中添加如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@styles/*": ["styles/*"]
    }
  }
}

如果你的styles文件夹存放在src目录下，将对应路径改为"@styles/*": ["src/styles/*"]即可。
如果不确定别名配置是否正确，可以先改用相对路径导入测试，比如pages/_app.tsx和styles文件夹同级的情况下，写为：

import '../styles/globals.scss'

• 第三步：清除缓存重启服务
  删除项目自动生成的.next缓存目录，重启开发服务即可：

rm -rf .next && npm run dev

• 第四步：确认自定义App的写法正确
  参考如下_app.tsx的标准写法核对：

import type { AppProps } from 'next/app'
// 导入全局样式
import '../styles/globals.scss'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

内容的提问来源于stack exchange，提问作者0xgoku