Next.js の「グローバル CSS はカスタム以外のファイルからインポートできません」エラーを修正するにはどうすればよいですか?

Next.js グローバル CSS インポートのジレンマ

Next.js では、グローバル CSS の管理が難しい場合があります。最近、ユーザーは「カスタム 以外のファイルからグローバル CSS をインポートできません」という困惑するエラーに遭遇しました。このエラーは、CSS インポートを Pages/_app.js に再配置する必要があることを示します。

原因の分析

このエラーは通常、@ などの従来のサードパーティ パッケージを使用するときに発生します。 CSS読み込み用のzeit/next-sass。 Next.js 9.2 のリリースにより、カスタム 内でグローバル CSS インポートが必須になりました。成分。この変更は、パフォーマンスを向上させ、CSS の処理を​​簡素化するために実装されました。

段階的な解決策

エラーを解決し、グローバル CSS を効果的に管理するには、次の点を考慮してください。手順:

1. 組み込み CSS に切り替えるローダー: sass をインストールして、@zeit/next-sass から組み込み Next.js CSS ローダーに移行します。
2. カスタム CSS 構成の削除: next.config.js を削除します。または、CSS ロード設定を変更しないようにしてください。
3. Relocate Global CSS: エラー メッセージに示されているように、グローバル CSS インポートを Pages/_app.js に移動します。

グローバル CSS インポートを使用した Pages/_app.js の例:

// pages/_app.js
import '../global-styles/main.scss'

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

スコープ付きの CSS モジュールの使用スタイリング

コンポーネントまたはページに固有のスタイルを適用するために、Next.js は CSS モジュールの組み込みサポートを提供します。コンポーネントと同じ名前の Sass ファイル (例: button.module.scss) を作成すると、そのコンポーネントにのみ適用されるスコープ付きスタイルを定義できます。

結論

Next.js の CSS 管理への最新のアプローチでは、グローバル スタイルをカスタム 内にインポートする必要があります。成分。提案された解決策を実装すると、「カスタム 以外のファイルからグローバル CSS をインポートできません」という問題を防ぐことができます。エラーが発生し、効果的な CSS 処理を確保します。

以上がNext.js の「グローバル CSS はカスタム以外のファイルからインポートできません」エラーを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。