为什么在安装 next-images 后，我的 Next.js 应用程序出现'无法导入全局 CSS”错误？

NPM 安装后 Next.js 全局 CSS 导入错误

安装 next-images 包后，您的 React 应用程序可能会遇到错误，指出“全局 CSS 无法从您的自定义 以外的文件导入。”按照错误消息的指示将全局 CSS 导入移动到 _app.js 后，会出现此问题。

根本原因：

Next.js 版本 9.2 引入了更改方式处理全局CSS。现在要求仅在自定义 中导入全局 CSS。

解决方案：

要解决此问题，请按照下列步骤操作：

1. 使用“下一步”。 js CSS 加载器：

   • 替换@zeit/next-sass，在 package.json 文件中使用 sass。
   • 删除 next.config.js 中对 CSS 加载的任何修改。

2. 将全局 CSS 移至_app.js:

   • 按照错误消息的建议，在pages/_app.js 文件中导入全局CSS。

3. 导入特定CSS模块：

   • 对于特定于组件或特定于页面的样式，通过将 CSS 模块导入到相应的组件或页面文件中来使用它们。

示例（已更新_app.js):

// pages/_app.js

import '../global-styles/main.scss'

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

其他信息：

即使没有直接更改 CSS 或 Layout.js，也可能会发生错误，因为 Next. Node.js 版本更新可能触发了新的 CSS 处理要求。

通过采用 Next.js CSS 加载器并导入全局 CSS在 _app.js 中，您可以确保在 Next.js 应用程序中正确处理全局 CSS。

以上是为什么在安装 next-images 后，我的 Next.js 应用程序出现'无法导入全局 CSS”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！