Pourquoi mes styles CSS disparaissent-ils après avoir actualisé la page dans Next.js ?

Question

J'ai créé un dossier CSS dans le dossier de l'application et j'y ai écrit les fichiers CSS. Importez-les ensuite dans des composants pour les utiliser. Ils sont appliqués au premier chargement. Mais lorsque j'actualise la page, ils ont tous disparu. Ma structure de dossiers

J'ai essayé de revenir en arrière et de sauvegarder à nouveau les fichiers et cela a fonctionné mais a disparu à chaque fois que j'ai actualisé à nouveau.

Answer 1

Dans next js, CSS ne peut pas être chargé dans chaque composant de page. Ne peut être chargé qu'à l'intérieur 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} />
}

S'ils doivent être appelés à l'intérieur d'un seul composant, il doit s'agir de modules CSS.

Par exemple : components/layout.js

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

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

Dans components/layout.module.css

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

Plus de contenu peut être trouvé ici