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

Next.js 全域 CSS 導入困境

在 Next.js 中，管理全域 CSS 可能很棘手。最近，一位用戶遇到了一個令人困惑的錯誤：「無法從自訂 以外的檔案匯入全域 CSS」。此錯誤表示 CSS 導入應重新定位到pages/_app.js。

分析原因

使用舊版第三方套件（如@）時通常會出現該錯誤zeit/next-sass 用於 CSS 載入。隨著 Next.js 9.2 的發布，自訂 中全域 CSS 導入已成為強制要求。成分。實施此變更是為了提高效能並簡化 CSS 處理。

逐步解決方案

要解決錯誤並有效管理全域CSS，請考慮以下事項步驟：

1. 切換到內建CSS 載入器： 遷移自透過安裝sass 將@zeit/next-sass 加入到內置Next.js CSS 載入器。
2. 刪除自訂 CSS 設定：刪除 next.config.js 或避免修改其中的 CSS 載入設定它。
3. 重新定位全域 CSS： 將全域 CSS 匯入移動到pages/_app.js，例如錯誤訊息。

具有全局CSS 導入的pages/_app.js 示例：

使用CSS 模塊進行範圍樣式

要套用特定於元件或頁面的樣式，Next.js 提供了對CSS模組的內建支援。透過建立與元件同名的 Sass 檔案（例如，button.module.scss），您可以定義僅套用於該元件的作用域樣式。

總結

Next.js 最新的 CSS 管理方法需要在自訂 中匯入全域樣式。成分。實作建議的解決方案將有助於防止「全域 CSS 無法從自訂 以外的檔案匯入」錯誤並確保有效的 CSS 處理。

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