為什麼我無法在 `pages/_app.js` 之外的 Next.js 中匯入全域 CSS？

「無法從自訂 以外的檔案匯入全域CSS」：理解與解決問題

Next.js是一個用於建構React 應用程式的流行框架，強調效能和程式碼結構。它的功能之一是全域 CSS 功能，它允許您匯入在整個應用程式中全域可用的 CSS 檔案。然而，某些限制和更新可能會導致使用此功能時發生錯誤。

最近，使用者遇到了錯誤訊息：「全域 CSS 無法從您的自訂 以外的檔案匯入。」此錯誤表示全域 CSS 匯入應移至pages/_app.js 檔案。了解此錯誤的原因並應用正確的解決方案對於成功的應用程式開發至關重要。

錯誤原因

Next.js 9.2 引入了全局方式的更改CSS 已處理。以前，您可以從專案中的任何檔案匯入全域 CSS，包括頁面、元件和實用程式檔案。但是，在 Next.js 9.2 及更高版本中，全域 CSS 必須僅從自訂 匯入。元件，位於pages/_app.js檔案中。

解決問題

要解決錯誤，您需要遵循三個簡單的步驟：

1. 使用內建的Next. js CSS 載入器：而不是使用舊版@zeit/next-sass包，透過安裝「sass」包切換到使用內建 Next.js CSS 載入器。
2. 刪除 next.config.js: 您可以刪除next.config.js 檔案或確保它不包含任何與 CSS 載入相​​關的設定變更。
3. 移動全域CSS： 依照錯誤訊息中的建議，將 main.scss 匯入語句移至 pages/_app.js 檔案。

範例

以下是具有全域 CSS 的更新的pages/_app.js文件的範例import:

其他資訊

如果您只想在特定元件或頁面上新增樣式，您可以利用 CSS 模組的內建支援。例如，若要為 Button.js 元件新增樣式，您可以建立一個名為 Button.module.scss 的 Sass 檔案並將其匯入到元件中。

按照上述步驟，您可以有效解決「無法從自訂 以外的檔案匯入全域 CSS」錯誤並確保您的 Next.js 應用程式的全域 CSS 得到正確處理。

以上是為什麼我無法在 `pages/_app.js` 之外的 Next.js 中匯入全域 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！