Warum erhalte ich in meiner Next.js-App nach der Installation von next-images die Fehlermeldung „Globales CSS kann nicht importiert werden'?

Next.js Global CSS ImportError After NPM Installation

Ihre React-Anwendung kann nach der Installation des Next-Images-Pakets auf einen Fehler stoßen, der besagt: „ Globales CSS kann nicht aus anderen Dateien als Ihrer benutzerdefinierten importiert werden. Dieses Problem tritt auf, nachdem globale CSS-Importe nach _app.js verschoben wurden, wie in der Fehlermeldung angegeben.

Ursache:

Next.js Version 9.2 führte Änderungen in der Vorgehensweise ein Es wird globales CSS behandelt. Es erfordert jetzt, dass globales CSS nur innerhalb der benutzerdefinierten -Datei importiert wird. Komponente.

Lösung:

Um dieses Problem zu beheben, führen Sie die folgenden Schritte aus:

1. Verwenden Sie „Weiter“. js CSS Loader:

   • Ersetzen Sie @zeit/next-sass mit sass in Ihrer package.json-Datei.
   • Entfernen Sie alle Änderungen am CSS-Laden in next.config.js.

2. Verschieben Sie globales CSS nach _app.js:

   • Importieren Sie Ihr globales CSS in die Seiten/_app.js Datei, wie in der Fehlermeldung vorgeschlagen.

3. Spezifische CSS-Module importieren:

   • Für komponentenspezifisch oder seitenspezifisch -spezifische Stile, verwenden Sie CSS-Module, indem Sie sie in die jeweilige Komponente oder Seite importieren Datei.

Beispiel (aktualisierte _app.js):

// pages/_app.js

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

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

Zusätzliche Informationen:

Der Fehler ist möglicherweise auch ohne direkte Änderungen an CSS oder Layout.js aufgetreten, da möglicherweise Versionsaktualisierungen von Next.js vorgenommen wurden löste die neuen CSS-Handhabungsanforderungen aus.

Durch die Übernahme des Next.js-CSS-Loaders und den Import von globalem CSS in _app.js können Sie die ordnungsgemäße Handhabung von globalem CSS in Ihrer Next.js-Anwendung sicherstellen.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in meiner Next.js-App nach der Installation von next-images die Fehlermeldung „Globales CSS kann nicht importiert werden'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!