Warum kann ich in meiner Next JS-App keine CSS-Dateien verwenden?

Question

Ich habe an einem Projekt mit Next JS für das Website-Design gearbeitet und möchte CSS-Dateien für das Komponentendesign verwenden, aber warum kann ich sie nicht in meine Komponente importieren? Ist es möglich, in einer Next JS-App nur modulare CSS-Dateien zu verwenden?

Ich habe viele Male versucht, CSS-Dateien in mein Next JS-Projekt zu importieren, aber der Import war nicht erfolgreich. Ich habe die globale CSS-Datei und die modulare CSS-Datei importiert, kann die CSS-Datei jedoch nicht importieren.

Answer 1

如果你不想使用模块，而是想使用一个全局的CSS文件，影响所有的组件和页面，那么是可以的。

但是如果你想为每个组件使用单独的CSS文件，那么模块是解决方案。

请参考这个文档

如果还没有，请创建一个pages/_app.js文件。然后，导入styles.css文件。

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

由于样式表的全局性质和为了避免冲突，你只能在pages/_app.js中导入它们。 styles.css中的这些样式将应用于应用程序中的所有页面和组件。