为什么我无法在Next JS应用中使用CSS文件？

Question

我一直在一个使用Next JS进行网站设计的项目中工作，想要使用CSS文件进行组件设计，但为什么我无法在我的组件中导入呢？ 在Next JS应用中是否可能只能使用模块化的CSS文件？

我尝试了很多次在我的Next JS项目中导入CSS文件，但没有成功导入。 我已经导入了全局的CSS文件和模块化的CSS文件，但无法导入CSS文件。

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中的这些样式将应用于应用程序中的所有页面和组件。