Comment puis-je corriger l'erreur « Le CSS global ne peut pas être importé à partir de fichiers autres que votre personnalisé » dans Next.js ?

Dilemme d'importation CSS globale de Next.js

Dans Next.js, la gestion du CSS global peut être délicate. Récemment, un utilisateur a rencontré une erreur déroutante : "Le CSS global ne peut pas être importé à partir de fichiers autres que votre personnalisée". Cette erreur signifie que les importations CSS doivent être déplacées vers pages/_app.js.

Analyse de la cause

L'erreur se produit généralement lors de l'utilisation de packages tiers hérités comme @ zeit/next-sass pour le chargement CSS. Avec la sortie de Next.js 9.2, les importations CSS globales sont devenues obligatoires dans l'application personnalisée composant. Ce changement a été mis en œuvre pour améliorer les performances et simplifier la gestion du CSS.

Une solution étape par étape

Pour résoudre l'erreur et gérer efficacement le CSS global, considérez ce qui suit étapes :

1. Passer au chargeur CSS intégré : Migrer depuis @zeit/next-sass au chargeur CSS Next.js intégré en installant sass.
2. Supprimez la configuration CSS personnalisée : Supprimez next.config.js ou évitez de modifier les configurations de chargement CSS dans it.
3. Déplacer le CSS global : Déplacer les importations CSS globales vers pages/_app.js, comme indiqué par le message d'erreur.

Exemple de pages/_app.js avec importation CSS globale :

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

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

Utilisation de modules CSS pour Scoped Style

Pour appliquer un style spécifique aux composants ou aux pages, Next.js offre une prise en charge intégrée des modules CSS. En créant un fichier Sass portant le même nom que le composant (par exemple, bouton.module.scss), vous pouvez définir des styles étendus qui ne sont appliqués qu'à ce composant.

En conclusion

La dernière approche de Next.js en matière de gestion CSS nécessite que les styles globaux soient importés dans l'application personnalisée composant. La mise en œuvre des solutions suggérées permettra d'éviter le problème : "Le CSS global ne peut pas être importé à partir de fichiers autres que votre personnalisée". erreur et assurer une gestion CSS efficace.

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!