Next.js默认项目启动时出现Global CSS导入错误求助

问题描述 #

使用npx create-next-app@latest ./创建默认Next.js项目，未修改任何代码，运行npm run dev时触发全局CSS导入错误。本地环境为Node.js v18.12.1、npm v8.19.2，此前线上正常的项目本地启动也出现相同错误。错误信息如下：

../../../#React Projects/My projects/causs/styles/global.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ..\..\..\#React Projects\My projects\causs\pages\_app.js

可能原因及解决方案 #

1. 项目路径包含特殊字符 #

从错误路径可见，项目所在目录包含#和空格这类特殊字符，Next.js解析文件路径时易出现异常，导致误判CSS导入位置。

• 解决步骤：将项目文件夹迁移到无特殊字符的路径下，比如D:\ReactProjects\causs或~/react-projects/causs，再重新运行npm run dev。

2. 验证pages/_app.js的CSS导入路径 #

即便未修改代码，也需确认默认导入是否正确：

• 打开pages/_app.js，检查是否存在import '../styles/globals.css'，确保路径是正确的相对路径且无拼写错误。若路径有误，修正后重启项目。

3. 清除项目缓存 #

缓存损坏可能引发异常报错，执行以下操作清理缓存：

• 删除项目根目录下的.next文件夹和node_modules文件夹；
• 重新执行npm install安装依赖；
• 再次运行npm run dev启动项目。

4. 调整Next.js版本兼容性 #

部分Next.js版本与Node.js v18存在兼容问题，可尝试切换至稳定版本：

• 执行npm install next@13.4.0（或其他经过验证的稳定版本号）；
• 重启项目验证问题是否解决。

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