Warum verschwinden meine CSS-Stile, nachdem ich die Seite in Next.js aktualisiert habe?

Question

Ich habe im Anwendungsordner einen CSS-Ordner erstellt und die CSS-Dateien darin geschrieben. Importieren Sie sie dann zur Verwendung in Komponenten. Sie werden beim ersten Laden angewendet. Aber wenn ich die Seite aktualisiere, sind sie alle verschwunden. Meine Ordnerstruktur

Ich habe versucht, zurückzugehen und die Dateien erneut zu speichern, und es hat funktioniert, ist aber jedes Mal verschwunden, wenn ich es erneut aktualisiert habe.

Answer 1

在接下来的js中，无法在每个单页面组件中加载CSS。只能在里面加载 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} />
}

如果需要在单个组件内部调用，它们应该是 CSS 模块。

例如：components/layout.js

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

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

在components/layout.module.css中

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

更多内容可以在此处

找到