Wie kann ich den Fehler „Globales CSS kann nicht aus anderen Dateien als Ihren benutzerdefinierten Dateien importiert werden' in Next.js beheben?

Globale Probleme beim CSS-Import von Next.js: Ein Leitfaden zur Fehlerbehebung

Was ist das Problem?

Next.js-Benutzer können Es wird eine Fehlermeldung angezeigt, die besagt: „Globales CSS kann nicht aus anderen Dateien als Ihrer benutzerdefinierten importiert werden.“ Dieser Fehler weist auf einen Versuch hin, globales CSS aus einer Datei außerhalb der angegebenen benutzerdefinierten -Datei zu importieren. Komponente.

Warum ist dieser Fehler aufgetreten?

Dieser Fehler kann auftreten, wenn ältere CSS-Lader wie @zeit/next-sass nach dem Upgrade auf Next.js 9.2 verwendet werden . Alternativ kann auch eine falsche Konfiguration in next.config.js das Problem auslösen.

Lösung

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

1. Verwenden Sie den integrierten CSS-Loader: Ersetzen Sie @zeit/next-sass durch sass in Ihrem package.json und entfernen Sie next.config.js oder ändern Sie die darin enthaltene CSS-Ladung nicht.
2. Globales CSS nach „Benutzerdefiniert “ verschieben: Gemäß den Next.js-Richtlinien global importieren CSS in die benutzerdefinierte Komponente unter pages/_app.js.
3. Verwenden Sie CSS-Module für Komponentenstile: Für Stile, die für eine Komponente oder Seite spezifisch sind, verwenden Sie CSS-Module. Importieren Sie die entsprechende .module.scss-Datei in die Komponente, um Stile nur auf diese Komponente anzuwenden.

Beispiel: Globales CSS nach _app.js verschieben

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

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

Fazit

Indem Sie diese Schritte befolgen, können Sie das Problem „Globales CSS kann nicht sein“ beheben aus anderen Dateien als Ihrer benutzerdefinierten importiert Fehler und stellen Sie die ordnungsgemäße CSS-Nutzung in Ihrer Next.js-Anwendung sicher.

Das obige ist der detaillierte Inhalt vonWie kann ich den Fehler „Globales CSS kann nicht aus anderen Dateien als Ihren benutzerdefinierten Dateien importiert werden' in Next.js beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!