Next.js 11.1.1从10版本升级后_app.js引入全局scss报错是什么原因

1. 优先清理编译缓存（最高概率解决） #

Next.js 11对全局CSS的校验逻辑做了重构，旧版本遗留的编译缓存会导致校验逻辑误判，按以下步骤清理缓存：

• 执行命令删除编译产物目录：rm -rf .next（Windows系统执行rmdir /s /q .next）
• 执行命令删除依赖及锁文件：rm -rf node_modules package-lock.json
• 重新安装依赖：npm install
• 重启开发服务验证：npm run dev

2. 修正_app.js语法错误 #

你提供的简化版_app.js代码缺失return关键字，导致Next.js无法正确识别当前文件为合法的Custom App文件，触发校验错误。标准写法如下：

import '../styles/globals.scss'

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

如果你的实际业务代码中确实未正确返回JSX元素，修正后即可解决问题。

3. 检查Sass版本兼容问题 #

你当前使用的sass@1.32.12与Next.js 11.1.1存在已知的全局样式校验兼容问题，可将Sass升级到1.38.0及以上版本解决：

npm install sass@^1.38.0 --save

4. 其他验证点 #

• 确认文件命名与路径：Custom App文件必须命名为_app.js，存放路径为项目根目录下的pages文件夹，Next.js对文件名大小写敏感，注意不要写成_App.js
• 确认无隐式全局CSS引入：检查globals.scss中是否通过@import引入了第三方依赖包内的CSS文件，这类间接引入也会触发全局CSS校验错误

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