如何修复 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中文网其他相关文章！