Mengapa saya tidak boleh menggunakan fail CSS dalam apl JS Seterusnya saya?

Question

Saya telah mengusahakan projek menggunakan Next JS untuk reka bentuk tapak web dan ingin menggunakan fail CSS untuk reka bentuk komponen, tetapi mengapa saya tidak boleh mengimportnya dalam komponen saya? Adakah mungkin untuk hanya menggunakan fail CSS modular dalam apl JS Seterusnya?

Saya mencuba banyak kali untuk mengimport fail CSS dalam projek JS Seterusnya saya tetapi ia tidak berjaya mengimport. Saya telah mengimport fail CSS global dan fail CSS modular, tetapi tidak boleh mengimport fail CSS.

Answer 1

Jika anda tidak mahu menggunakan modul, tetapi ingin menggunakan fail CSS global yang mempengaruhi semua komponen dan halaman, maka anda boleh.

Tetapi jika anda ingin menggunakan fail CSS yang berasingan untuk setiap komponen, maka modul adalah penyelesaiannya.

Sila rujuk dokumen ini

Buat pages/_app.jsfail jika anda belum memilikinya. Kemudian, import fail styles.css.

import '../your_styles_file.css'
 
// 这个默认导出在新的 `pages/_app.js` 文件中是必需的。
export default function YourApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Disebabkan sifat global lembaran gaya dan untuk mengelakkan konflik, anda hanya boleh mengimportnya dalam halaman/_app.js. Gaya dalam styles.css ini akan digunakan pada semua halaman dan komponen dalam aplikasi.