logo标签列表

如何在Next.js应用程序文件夹中将CSS文件添加到页面头部？

javascriptreactjsnext.js
4
以“老式”的方式（利用）/pages，我将编辑位于/pages目录下的_app.js文件，添加以下内容：
import Head from 'next/head'
export default function MyApp({ Component, pageProps }) {
  return <> 
<Head>
<link rel="stylesheet" href="/css/styles.css" />
      </Head>
<Component {...pageProps} />
</>
}

然而，在新版本Next.js 13中，没有/pages/_app.js文件。相反，有layout.js和head.js。当我尝试在head.js（/favicon.ico旁边）中添加导入时，我会收到以下错误：

react_devtools_backend.js:4012 警告：不知道其优先级的情况下，无法在主文档之外呈现<link>。请考虑添加precedence="default"或将其移动到根<head>标记中。

当我尝试在layout.js文件中导入如下内容时：

import "/css/styles.css";

我遇到了编译错误：

找不到模块：无法解析 '/css/styles.css'

我查看了官方文档，但他们只建议如何从全局样式（../../..）导入，而不是从公共文件夹导入。

我还在寻找关于head.js的一些文档，但似乎找不到任何信息...你能和我分享一些吗？ - Nikola Mitic
我还在寻找关于head.js的一些文档，但似乎找不到任何资料...你能和我分享一些吗？ - undefined
好的，看起来它已经被弃用了... https://github.com/vercel/next.js/discussions/47166 - Nikola Mitic
好的，看起来它已经被弃用了... https://github.com/vercel/next.js/discussions/47166 - undefined
2个回答
4

如果您需要从public文件夹导入的CSS，可以像您所说的那样在head.js中执行，但是您需要向您的link添加precedence="default"，正如文档中所说：

如果您想手动放置<link rel="stylesheet" />，它需要一个优先级字段，这是一个新的React特定属性<link rel="stylesheet" precedence="default" />。

// in head.js, alongside layout.js and page.js

export default function Head() {
  return (
    <>
      <title>Create Next App</title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
      <link rel="stylesheet" href="/css/styles.css" precedence="default" />
    </>
  );
}

您可能会收到一个 Eslint 警告，指出 "不要手动包含样式表"，您可以通过添加以下注释来取消激活该警告：

{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/css/styles.css" precedence="default" />

此外，正如您可能已经知道的那样，像这样包含css文件并不能在您更改其内容时进行实时重新加载。因此，它用于不经常更改的外部CSS。
0

您可以使用../..从public文件夹导入。

具有目录结构的情况下

/[project root]
  /public
    /css
      - styles.css
  /app
    - layout.js

你可以使用 import '../public/css/styles.css' 导入你的样式。
当然可以，但是使用public的整个想法就是不必使用../..。特别是如果您正在处理嵌套组件并且有一天决定将它们移动-路径将会中断。 - Dawid Adach
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接