如何从Next.js 13的新app文件夹中的公用文件夹中导入CSS个文件？

Question

以“老式”方式（利用） /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} />
</>
}

但是在新版本中没有/pages/_app.js文件。 有layout.js和head.js代替。 当我尝试添加head.js （在 /favicon.ico 旁边）导入时出现错误：

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

当我尝试导入layout.js文件时，如下所示：

import "/css/styles.css";

我收到编译错误：

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

我正在查看官方文档，但他们只建议如何从全局 styles (../../..) 而不是从公共文件夹导入。

Answer 1

如此处的官方文档所述，您需要创建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} />
</>
}

Answer 2

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

与目录结构

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

您可以使用import '../public/css/styles.css'导入您的 styles

Answer 3

如果您需要从public导入的 CSS，您可以按照您所说的那样在head.js中执行此操作，但您需要在link中添加precedence="default" ，正如他们在文档中所说：

如果你想手动放置，它需要一个优先字段，它是一个新的 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。

如何从Next.js 13的新app文件夹中的公用文件夹中导入CSS个文件？

问题描述

3 个解决方案

解决方案1
0 2022-12-27 22:58:41

解决方案2
0 2022-12-27 23:52:18

解决方案3
0 2022-12-28 17:19:24

如何从Next.js 13的新app文件夹中的公用文件夹中导入CSS个文件？

问题描述

3 个解决方案

解决方案1 0 2022-12-27 22:58:41

解决方案2 0 2022-12-27 23:52:18

解决方案3 0 2022-12-28 17:19:24

解决方案1
0 2022-12-27 22:58:41

解决方案2
0 2022-12-27 23:52:18

解决方案3
0 2022-12-28 17:19:24