如何修復 Next.js 中的「無法從自訂檔案以外的檔案匯入全域 CSS」錯誤？

Next.js 全域 CSS 導入問題：故障排除指南

問題是什麼？

Next.js 使用者可能會遇到錯誤，指出「無法從自訂 以外的檔案匯入全域CSS。」此錯誤表示嘗試從指定自訂 外部的文件導入全域CSS。

為什麼會出現此錯誤？

升級到 Next.js 9.2 後使用舊版 CSS 載入器（例如 @zeit/next-sass）時可能會出現此錯誤。另外，next.config.js 中的錯誤配置也可能觸發該問題。

解決方案

要解決此問題，請按照以下步驟操作：

1. 使用內建CSS 載入器：將@zeit/next-sass 替換為sass您的package.json 並刪除next.config.js 或避免更改其中的 CSS 載入。
2. 將全域 CSS 移至自訂 ：根據 Next.js 指南，匯入將全域 CSS 新增至自訂 中元件位於pages/_app.js。
3. 使用 CSS 模組作為元件樣式：對於特定於元件或頁面的樣式，請使用 CSS 模組。將相應的 .module.scss 檔案匯入到元件中，以僅將樣式套用至該元件。

範例：將全域CSS 移至_app.js

// pages/_app.js
import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

結論

依照以下步驟，您可以解決「無法從自訂 以外的檔案匯入全域CSS」錯誤並確保在Next.js應用程式中正確使用 CSS。

以上是如何修復 Next.js 中的「無法從自訂檔案以外的檔案匯入全域 CSS」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！