next-images をインストールした後、Next.js アプリで「グローバル CSS をインポートできません」というエラーが発生するのはなぜですか?

NPM インストール後の Next.js Global CSS ImportError

next-images パッケージのインストール後に、React アプリケーションで次のようなエラーが発生する場合があります。グローバル CSS はカスタム 以外のファイルからインポートできません。」この問題は、エラー メッセージの指示に従って、グローバル CSS インポートを _app.js に移動した後に発生します。

根本原因:

Next.js バージョン 9.2 では、その方法が変更されました。グローバルCSSが扱われます。今後は、グローバル CSS をカスタム 内にのみインポートする必要があります。

解決策:

この問題を解決するには、次の手順に従います:

1. 「次へ」を使用します。 jsCSSローダー:

   • package.json ファイル内の @zeit/next-sass を sass に置き換えます。
   • next.config.js で読み込む CSS への変更を削除します。

2. 移動グローバル CSS を _app.js に:

   • エラー メッセージに示されているように、グローバル CSS を Pages/_app.js ファイルにインポートします。

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 を直接変更しなくてもエラーが発生した可能性があります。 js バージョンの更新により、新しい CSS 処理要件が発生した可能性があります。

Next.js CSS を採用することによりローダーを使用して _app.js にグローバル CSS をインポートすると、Next.js アプリケーションでグローバル CSS を適切に処理できるようになります。

以上がnext-images をインストールした後、Next.js アプリで「グローバル CSS をインポートできません」というエラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。