Next.js全局CSS导入异常求助：跨设备运行报错未解决

报错信息（翻译后） #

错误 - ./styles/index.css 全局CSS只能从自定义App组件文件（pages/_app.js）中导入。由于样式表的全局特性，为避免冲突，请将所有第一方全局CSS导入移至pages/_app.js。或者将导入转换为组件级CSS（CSS Modules）。

排查及解决步骤 #

• 检查自定义App组件文件名：确认项目中存在pages/_app.js（注意是下划线命名），如果文件名写成pages_app.js这类错误名称，Next.js无法识别为全局样式的合法导入位置，直接修改文件名即可。
• 统一全局CSS导入位置：将所有全局CSS文件（比如styles/index.css）的导入语句仅保留在pages/_app.js中，删除其他页面、组件里的全局CSS导入。示例正确的pages/_app.js结构：

import '../styles/index.css'
import { AppProps } from 'next/app'

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

export default MyApp

• 锁定Next.js版本：确保新旧电脑使用完全一致的Next.js版本，打开package.json，将next的版本号改为固定值（比如"next": "13.4.12"，替换为你旧电脑上的实际版本），然后执行npm install重装依赖。
• 排查隐藏的全局CSS导入：用编辑器全局搜索你的全局CSS路径（比如import '../styles/index.css'），确认除了pages/_app.js外，没有其他文件存在该导入语句。
• 组件级样式替代（可选）：如果需要在组件中导入样式，将全局CSS文件重命名为[name].module.css（比如index.module.css），然后在组件中通过import styles from '../styles/index.module.css'导入使用。

内容的提问来源于stack exchange，提问作者Amjid Ali Shah