使用Create Next App创建项目后执行npm run dev时出现全局CSS导入错误

嘿，我看到你明明已经按照要求把全局CSS导入到_app.js里了，但还是碰到这个错误，这确实有点让人困惑——咱们来一步步排查问题：

首先检查文件名和路径是否正确 #

错误提示里提到的位置是pages_app.js，这大概率是文件名拼写错误！Next.js要求自定义App组件必须命名为_app.js，并且放在pages文件夹的根目录下（也就是pages/_app.js）。如果你的文件名写成了pages_app.js，Next.js根本识别不到它作为全局App组件，自然会认为你在其他地方非法导入了全局CSS。

检查其他文件是否重复导入全局CSS #

哪怕_app.js里已经导入了globals.css，如果其他页面组件（比如pages/index.js）或者自定义组件里也导入了这个文件，同样会触发这个错误。你需要遍历所有文件，删掉其他地方的import '../styles/globals.css'语句，只保留_app.js里的那一处。

确认你的_app.js代码是正确的 #

你的代码其实是符合要求的，这里再贴一遍标准写法方便你对照：

import '../styles/globals.css'

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

export default MyApp

确保这个文件没有语法错误，并且正确导出了MyApp组件。

如果你用的是Next.js 13+的App Router #

如果你的项目是基于App Router初始化的（而不是传统的Pages Router），规则会不一样：

• 全局CSS文件需要放在app/globals.css
• 然后在app/layout.js中导入这个文件，而不是_app.js（App Router里没有_app.js这个文件）

最后验证 #

修改完成后，重启npm run dev服务，应该就能解决这个错误了。

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