Next.js の「pages/_app.js」以外でグローバル CSS をインポートできないのはなぜですか?

「カスタム <App> 以外のファイルからグローバル CSS をインポートできません」: 問題の理解と解決

Next.jsは、パフォーマンスとコード構造を重視した React アプリケーションを構築するための人気のあるフレームワークです。その機能の 1 つはグローバル CSS 機能で、アプリケーション全体でグローバルに使用できる CSS ファイルをインポートできます。ただし、この機能を使用すると、特定の制限や更新によりエラーが発生する可能性があります。

最近、ユーザーに「カスタム <App> 以外のファイルからグローバル CSS をインポートできません。」というエラー メッセージが表示されることがあります。このエラーは、グローバル CSS インポートを pages/_app.js ファイルに移動する必要があることを示しています。このエラーの理由を理解し、正しい解決策を適用することは、アプリケーション開発を成功させるために非常に重要です。

エラーの理由

Next.js 9.2 では、グローバルなメソッドの変更が導入されました。 CSSが扱われます。以前は、ページ、コンポーネント、ユーティリティ ファイルなど、プロジェクト内の任意のファイルからグローバル CSS をインポートできました。ただし、Next.js 9.2 以降では、グローバル CSS はカスタム <App> からのみインポートする必要があります。このコンポーネントは、pages/_app.js ファイルにあります。

問題の解決

エラーを解決するには、次の 3 つの簡単な手順に従う必要があります。

1. 組み込みの Next.js CSS ローダーを使用します:レガシー @zeit/next-sass パッケージの場合は、「sass」パッケージをインストールして、組み込み Next.js CSS ローダーの使用に切り替えます。
2. next.config.js: を削除します。 next.config.js ファイルを削除するか、CSS の読み込みに関連する構成変更がファイルに含まれていないことを確認してください。
3. グローバルを移動しますCSS: エラー メッセージに示されているように、main.scss import ステートメントを Pages/_app.js ファイルに移動します。

例

以下は、グローバル CSS を使用して更新された Pages/_app.js ファイルの例です。 import:

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

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

追加情報

特定のコンポーネントまたはページにのみスタイルを追加したい場合は、CSS モジュールの組み込みサポートを利用できます。 。たとえば、Button.js コンポーネントにスタイルを追加するには、button.module.scss という名前の Sass ファイルを作成し、コンポーネント内にインポートします。

上記の手順に従うことで、効果的に問題を解決できます。 「グローバル CSS はカスタム <App> 以外のファイルからインポートできません。」エラーを確認し、Next.js アプリケーションのグローバル CSS が正しく処理されていることを確認してください。

以上がNext.js の「pages/_app.js」以外でグローバル CSS をインポートできないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。