为什么我无法在 `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:

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

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

其他信息

如果您只想向特定组件或页面添加样式，您可以利用对 CSS 模块的内置支持。例如，要向 Button.js 组件添加样式，您可以创建一个名为 Button.module.scss 的 Sass 文件并将其导入到组件中。

按照上述步骤，您可以有效解决“无法从自定义 以外的文件导入全局 CSS”错误并确保您的 Next.js 应用程序的全局 CSS 得到正确处理。

以上是为什么我无法在 `pages/_app.js` 之外的 Next.js 中导入全局 CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！