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

Next.js グローバル CSS インポートの問題: トラブルシューティング ガイド

問題は何ですか?

Next.js ユーザーは次のような可能性があります。 「グローバル CSS はカスタム以外のファイルからインポートできません」というエラーが発生する。」このエラーは、指定されたカスタム の外部のファイルからグローバル CSS をインポートしようとしたことを示します。

なぜこのエラーが発生しましたか?

Next.js 9.2 にアップグレードした後、@zeit/next-sass などの従来の CSS ローダーを使用すると、このエラーが発生する可能性があります。 。あるいは、next.config.js の構成が正しくないことによっても問題が発生する可能性があります。

解決策

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

1. 組み込み CSS ローダーを使用する: @zeit/next-sass を置き換えますpackage.json に sass を追加し、next.config.js を削除するか、その中の CSS 読み込みを変更しないでください。
2. グローバル CSS をカスタム に移動します: Next.js に従ってガイドラインに従って、グローバル CSS をカスタム にインポートします。コンポーネントは、pages/_app.js にあります。
3. コンポーネント スタイルに CSS モジュールを使用する: コンポーネントまたはページに固有のスタイルについては、CSS モジュールを利用します。対応する .module.scss ファイルをコンポーネントにインポートして、そのコンポーネントにのみスタイルを適用します。

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

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

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

結論

次の手順に従うことで、次のことができます。 「グローバル CSS はカスタム 以外のファイルからインポートできません」を解決します。エラーが発生した場合は、Next.js アプリケーションで適切な CSS が使用されていることを確認してください。

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