Pourquoi est-ce que je reçois une erreur « Le CSS global ne peut pas être importé » dans mon application Next.js après l'installation de next-images ?

Erreur d'importation CSS globale Next.js après l'installation de NPM

Votre application React peut rencontrer une erreur après l'installation du package next-images indiquant : " Le CSS global ne peut pas être importé à partir de fichiers autres que votre personnalisée." Ce problème survient après le déplacement des importations CSS globales vers _app.js, comme indiqué par le message d'erreur.

Cause première :

La version 9.2 de Next.js a introduit des modifications dans la façon dont Le CSS global est géré. Il nécessite désormais que le CSS global soit importé uniquement dans l'application personnalisée composant.

Résolution :

Pour résoudre ce problème, suivez ces étapes :

1. Utilisez le composant Suivant. js CSS Loader :

   • Remplacez @zeit/next-sass par sass dans votre fichier package.json.
   • Supprimez toutes les modifications apportées au chargement du CSS dans next.config.js.

2. Déplacez le CSS global vers _app .js :

   • Importez votre CSS global dans le fichier pages/_app.js, comme suggéré par le message d'erreur.

3. Importer des modules CSS spécifiques :

   • Pour les styles spécifiques à un composant ou à une page , utilisez les modules CSS en les important dans le composant ou la page concernée fichier.

Exemple (_app.js mis à jour) :

// pages/_app.js

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

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

Informations supplémentaires :

L'erreur peut s'être produite même sans modification directe de CSS ou de Layout.js car la version Next.js est mise à jour peut avoir déclenché les nouvelles exigences de gestion CSS.

En adoptant le chargeur CSS Next.js et en important du CSS global dans _app.js, vous pouvez garantir une gestion appropriée du CSS global dans votre application Next.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!