reactjs 如何从Next.js 13的新应用文件夹中的公共文件夹导入CSS文件？

wvyml7n5 于 2022-12-29 发布在 React

关注(0)|答案(3)|浏览(167)

在一个'旧时尚'的方式（利用）*/pages * 我会编辑 _app. js * 文件下/pages * 目录添加类似的东西：

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旁边）import时，我收到错误：
错误代码：4012警告：无法在不知道优先级的情况下呈现主文档外部的。请考虑添加precedence ="default"或将其移动到根标记中。
当我尝试导入 * layout. js * 文件时，如下所示：

import "/css/styles.css";

我收到编译错误：
未找到模块：无法解析“/”
我正在检查官方文档，但他们只建议如何从全局样式（../../..）导入，而不是从公共文件夹导入。

reactjs

来源：https://stackoverflow.com/questions/74934561/how-to-import-css-files-from-public-folder-in-the-new-app-folder-of-next-js-13

3条答案

按热度按时间

dy1byipe1#

如果您需要从public文件夹导入CSS，您可以在head.js文件夹中导入，但您需要将precedence="default"添加到link文件夹中，如documentation文件夹中所述：
如果您想手动放置<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）回复(0）举报 2022-12-29

wfauudbj2#

可以使用../..从public文件夹导入。
使用目录结构

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

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

赞(0）回复(0）举报 2022-12-29

yyyllmsg3#

正如这里的官方文档中所述，如果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} />
</>
}

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 如何从Next.js 13的新应用文件夹中的公共文件夹导入CSS文件？

3条答案

相关问题

热门标签

最新问答