Dilemma beim globalen CSS-Import von Next.js
In Next.js kann die Verwaltung von globalem CSS schwierig sein. Kürzlich stieß ein Benutzer auf einen verwirrenden Fehler: „Globales CSS kann nicht aus anderen Dateien als Ihrer benutzerdefinierten
Analyse der Ursache
Der Fehler tritt normalerweise auf, wenn ältere Pakete von Drittanbietern wie @ verwendet werden. zeit/next-sass zum Laden von CSS. Mit der Veröffentlichung von Next.js 9.2 sind globale CSS-Importe innerhalb der benutzerdefinierten
Eine Schritt-für-Schritt-Lösung
Um den Fehler zu beheben und globales CSS effektiv zu verwalten, beachten Sie Folgendes Schritte:
Beispiel für page/_app.js mit globalem CSS-Import:
// pages/_app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }
Verwendung von CSS-Modulen für Scoped Styling
Um Stile speziell auf Komponenten oder Seiten anzuwenden, bietet Next.js integrierte Unterstützung für CSS-Module. Indem Sie eine Sass-Datei mit demselben Namen wie die Komponente erstellen (z. B. button.module.scss), können Sie bereichsbezogene Stile definieren, die nur auf diese Komponente angewendet werden.
Abschluss
Der neueste Ansatz von Next.js zur CSS-Verwaltung erfordert den Import globaler Stile in die benutzerdefinierte
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!