為什麼我無法在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中的這些樣式將應用於應用程式中的所有頁面和元件。