Pourquoi ne puis-je pas utiliser de fichiers CSS dans mon application Next JS ?

Question

J'ai travaillé sur un projet utilisant Next JS pour la conception de sites Web et je souhaite utiliser des fichiers CSS pour la conception de composants, mais pourquoi ne puis-je pas les importer dans mon composant ? Est-il possible d'utiliser uniquement des fichiers CSS modulaires dans une application Next JS ?

J'ai essayé plusieurs fois d'importer des fichiers CSS dans mon projet Next JS, mais l'importation n'a pas réussi. J'ai importé le fichier CSS global et le fichier CSS modulaire, mais je ne parviens pas à importer le fichier CSS.

Answer 1

Si vous ne souhaitez pas utiliser de modules, mais souhaitez utiliser un fichier CSS global qui affecte tous les composants et pages, vous pouvez le faire.

Mais si vous souhaitez utiliser des fichiers CSS distincts pour chaque composant, les modules sont la solution.

Veuillez vous référer à ce document

Créez un pages/_app.jsfichier si vous n’en avez pas déjà un. Ensuite, importez le fichier styles.css.

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

En raison du caractère global des feuilles de style et pour éviter les conflits, vous ne pouvez les importer que dans pages/_app.js. Ces styles dans styles.css seront appliqués à toutes les pages et composants de l’application.