Mengapa Saya Mendapat Ralat 'CSS Global Tidak Dapat Diimport' dalam Apl Next.js Saya Selepas Memasang imej seterusnya?

Next.js Global CSS ImportRalat Selepas Pemasangan NPM

Aplikasi React anda mungkin menghadapi ralat selepas memasang pakej imej seterusnya yang menyatakan, " CSS global tidak boleh diimport daripada fail selain daripada Tersuai anda." Isu ini timbul selepas mengalihkan import CSS global ke _app.js, seperti yang diarahkan oleh mesej ralat.

Punca Punca:

Next.js versi 9.2 memperkenalkan perubahan dalam cara CSS global dikendalikan. Ia kini memerlukan CSS global untuk diimport hanya dalam komponen.

Penyelesaian:

Untuk menyelesaikan isu ini, ikut langkah berikut:

1. Gunakan Seterusnya. js CSS Loader:

   • Ganti @zeit/next-sass dengan sass dalam fail package.json anda.
   • Alih keluar sebarang pengubahsuaian pada pemuatan CSS dalam next.config.js.

2. Alihkan CSS Global ke _app.js:

   • Import CSS global anda dalam fail pages/_app.js, seperti yang dicadangkan oleh mesej ralat.

3. Import Modul CSS Khusus:

   • Untuk gaya khusus komponen atau halaman khusus, gunakan modul CSS dengan mengimportnya dalam komponen atau fail halaman masing-masing.

Contoh (Dikemas kini _app.js):

// pages/_app.js

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

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

Tambahan Maklumat:

Ralat mungkin telah berlaku walaupun tanpa perubahan langsung pada CSS atau Layout.js kerana kemas kini versi Next.js mungkin telah mencetuskan keperluan pengendalian CSS baharu.

Dengan mengguna pakai Next.js pemuat CSS dan mengimport CSS global dalam _app.js, anda boleh memastikan pengendalian CSS global yang betul dalam aplikasi Next.js anda.

Atas ialah kandungan terperinci Mengapa Saya Mendapat Ralat 'CSS Global Tidak Dapat Diimport' dalam Apl Next.js Saya Selepas Memasang imej seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!