為什麼在安裝 next-images 後，我的 Next.js 應用程式出現「無法匯入全域 CSS」錯誤？

NPM 安裝後Next.js 全域CSS 匯入錯誤

安裝next-images 套件後，您的React 應用程式可能會遇到錯誤，指出「全域CSS 無法從您的自訂 以外的檔案匯入。」依照錯誤訊息的指示將全域CSS導入移至 _app.js 後，會出現此問題。

根本原因：

Next.js 版本 9.2 引入了更改方式處理全域CSS。現在要求僅在自訂 中匯入全域 CSS。

解決方案：

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

1. 使用「下一步」。 js CSS 載入器：

   • 取代@zeit/next-sass，在 package.json 檔案中使用 sass。
   • 刪除 next.config.js 中對 CSS 載入的任何修改。

2. 將全域CSS 移至_app.js:

   • 依照錯誤訊息的建議，在pages/_app .js 檔案中導入全域CSS。

3. 匯入特定CSS模組：

   • 對於特定於元件或特定於頁面的樣式，透過將CSS 模組匯入到相應的元件或頁面檔案中來使用它們。

示例（已更新_app.js):

// pages/_app.js

import '../global-styles/main.scss'

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

其他信息：

即使沒有直接更改CSS 或Layout.js，也可能會發生錯誤，因為Next. Node.js 版本更新可能觸發了新的 CSS 處理要求。

透過採用 Next.js CSS 載入器並匯入全域 CSS在 _app.js 中，您可以確保在 Next.js 應用程式中正確處理全域 CSS。

以上是為什麼在安裝 next-images 後，我的 Next.js 應用程式出現「無法匯入全域 CSS」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！