Mengapa Saya Tidak Boleh Mengimport CSS Global dalam Next.js Di Luar `pages/_app.js`?

"CSS Global tidak boleh diimport daripada fail selain daripada " Tersuai anda: Memahami dan Menyelesaikan Isu

Next.js ialah rangka kerja popular untuk membina aplikasi React yang menekankan prestasi dan struktur kod. Salah satu cirinya ialah ciri CSS global, yang membolehkan anda mengimport fail CSS yang tersedia secara global di seluruh aplikasi anda. Walau bagaimanapun, pengehadan dan kemas kini tertentu boleh menyebabkan ralat apabila menggunakan ciri ini.

Baru-baru ini, pengguna telah menemui mesej ralat: "CSS Global tidak boleh diimport daripada fail selain daripada Tersuai anda." Ralat ini menunjukkan bahawa import CSS global harus dialihkan ke fail pages/_app.js. Memahami sebab ralat ini dan menggunakan penyelesaian yang betul adalah penting untuk pembangunan aplikasi yang berjaya.

Sebab Ralat

Next.js 9.2 memperkenalkan perubahan kepada cara global CSS dikendalikan. Sebelum ini, anda boleh mengimport CSS global daripada mana-mana fail dalam projek anda, termasuk halaman, komponen dan fail utiliti. Walau bagaimanapun, dalam Next.js 9.2 dan lebih baru, CSS global mesti diimport secara eksklusif daripada komponen, yang terletak dalam fail pages/_app.js.

Menyelesaikan Isu

Untuk menyelesaikan ralat, anda perlu mengikuti tiga langkah mudah:

1. Gunakan pemuat CSS Next.js terbina dalam: Daripada menggunakan pakej legasi @zeit/next-sass, beralih kepada menggunakan pemuat CSS Next.js terbina dalam dengan memasang pakej "sass".
2. Alih keluar next.config.js: Anda boleh alih keluar fail next.config.js atau pastikan ia tidak mengandungi sebarang perubahan konfigurasi yang berkaitan dengan pemuatan CSS.
3. Alih CSS global: Alihkan penyataan import main.scss anda ke fail pages/_app.js, seperti yang dicadangkan dalam mesej ralat.

Contoh

Berikut ialah contoh fail halaman/_app.js yang dikemas kini dengan CSS global import:

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

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

Maklumat Tambahan

Jika anda ingin menambah gaya hanya pada komponen atau halaman tertentu, anda boleh menggunakan sokongan terbina dalam untuk modul CSS . Contohnya, untuk menambah gaya pada komponen Button.js, anda boleh mencipta fail Sass bernama button.module.scss dan mengimportnya dalam komponen.

Dengan mengikut langkah yang digariskan di atas, anda boleh menyelesaikan masalah dengan berkesan. "CSS Global tidak boleh diimport daripada fail selain daripada Tersuai anda" ralat dan pastikan CSS global aplikasi Next.js anda dikendalikan dengan betul.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Mengimport CSS Global dalam Next.js Di Luar `pages/_app.js`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!