Bagaimanakah Saya Boleh Membetulkan 'CSS Global tidak boleh diimport daripada fail selain daripada Ralat Tersuai ' anda dalam Next.js?

Isu Import CSS Global Next.js: Panduan Penyelesaian Masalah

Apakah Isunya?

Pengguna Next.js mungkin menghadapi ralat yang menyatakan, "CSS Global tidak boleh diimport daripada fail selain daripada Custom anda ." Ralat ini menunjukkan percubaan untuk mengimport CSS global daripada fail di luar Tersuai yang ditetapkan; komponen.

Mengapa Ralat Ini Berlaku?

Ralat ini mungkin timbul apabila menggunakan pemuat CSS lama seperti @zeit/next-sass selepas menaik taraf kepada Next.js 9.2 . Sebagai alternatif, konfigurasi yang salah dalam next.config.js juga boleh mencetuskan isu.

Penyelesaian

Untuk menyelesaikan isu ini, ikut langkah berikut:

1. Gunakan Pemuat CSS Terbina dalam: Gantikan @zeit/next-sass dengan sass dalam package.json anda dan alih keluar next.config.js atau elakkan daripada mengubah pemuatan CSS di dalamnya.
2. Alihkan CSS Global ke Tersuai : Mengikut garis panduan Next.js, import CSS global ke dalam komponen yang terdapat di pages/_app.js.
3. Gunakan Modul CSS untuk Gaya Komponen: Untuk gaya khusus untuk komponen atau halaman, gunakan modul CSS. Import fail .module.scss yang sepadan ke dalam komponen untuk menggunakan gaya hanya pada komponen itu.

Contoh: Mengalihkan CSS Global ke _app.js

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

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

Kesimpulan

Dengan mengikuti langkah-langkah ini, anda boleh menyelesaikan masalah "CSS Global tidak boleh diimport daripada fail selain daripada Tersuai anda" ralat dan pastikan penggunaan CSS yang betul dalam aplikasi Next.js anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan 'CSS Global tidak boleh diimport daripada fail selain daripada Ralat Tersuai ' anda dalam Next.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!