Next.js 11.1.2在_app.js引入全局CSS构建时报错如何解决？

Next.js 从10版本开始加入了全局CSS引入限制，避免全局样式污染不同页面的渲染结果，仅允许在自定义_app.js入口文件中引入全局CSS。你当前编写的_app.js和globals.css代码本身没有语法错误，构建报错可按以下步骤排查解决：

• 排查所有页面、组件文件，删除除pages/_app.js之外的所有全局CSS引入语句，其他位置引入全局CSS会直接触发构建失败
• 确认项目文件结构匹配你编写的引入路径，标准结构参考：

项目根目录
├── pages
│   └── _app.js
├── styles
│   └── globals.css
└── next.config.js

• 检查next.config.js配置，如果你配置了自定义CSS处理loader，先移除相关配置，使用Next.js内置的CSS处理规则测试构建
• 清除构建缓存后重试，执行命令：rm -rf .next && npm run build，排除旧缓存导致的异常报错

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