Comment puis-je corriger les erreurs « Le CSS global ne peut pas être importé à partir de fichiers autres que vos ' erreurs personnalisées dans Next.js ?

Problèmes d'importation CSS globale de Next.js : un guide de dépannage

Quel est le problème ?

Les utilisateurs de Next.js peuvent vous rencontrez une erreur indiquant : "Le CSS global ne peut pas être importé à partir de fichiers autres que votre personnalisée." Cette erreur indique une tentative d'importation de CSS global à partir d'un fichier en dehors de l' composant.

Pourquoi cette erreur s'est-elle produite ?

Cette erreur peut survenir lors de l'utilisation de chargeurs CSS hérités tels que @zeit/next-sass après la mise à niveau vers Next.js 9.2. . Alternativement, une configuration incorrecte dans next.config.js peut également déclencher le problème.

Solution

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

1. Utilisez le chargeur CSS intégré : remplacez @zeit/next-sass par sass dans votre package.json et supprimez next.config.js ou évitez de modifier le chargement du CSS à l'intérieur.
2. Déplacez le CSS global vers l' personnalisé> : conformément aux directives Next.js, importez le fichier global CSS dans l'application personnalisée composant situé dans pages/_app.js.
3. Utiliser les modules CSS pour les styles de composants : pour les styles spécifiques à un composant ou à une page, utilisez des modules CSS. Importez le fichier .module.scss correspondant dans le composant pour appliquer des styles uniquement à ce composant.

Exemple : déplacement du CSS global vers _app.js

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

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

Conclusion

En suivant ces étapes, vous pouvez résoudre le problème "Global CSS ne peut pas être importé à partir de fichiers autres que votre personnalisée" erreur et assurez-vous d'une utilisation correcte du CSS 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!