Mengapakah gaya CSS saya hilang selepas memuat semula halaman dalam Next.js?

Question

Saya mencipta folder CSS dalam folder aplikasi dan menulis fail CSS di dalamnya. Kemudian importnya ke dalam komponen untuk digunakan. Mereka digunakan pada beban pertama. Tetapi apabila saya memuat semula halaman, semuanya hilang. Struktur folder saya

Saya cuba kembali dan menyimpan fail sekali lagi dan ia berjaya tetapi hilang setiap kali saya menyegarkan semula.

Answer 1

Dalam js seterusnya, CSS tidak boleh dimuatkan dalam setiap komponen halaman tunggal. Hanya boleh dimuatkan di dalam pages/_app.js

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Jika ia perlu dipanggil dalam satu komponen, ia mestilah modul CSS.

Contohnya: komponen/layout.js

import styles from './layout.module.css';

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

Dalam komponen/layout.module.css

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

Lebih banyak kandungan boleh didapati di sini