如何在 nextjs react 项目中包含静态文件夹中的 css？答案

【问题标题】：How do i Include css from static folder in a nextjs react project?如何在 nextjs react 项目中包含静态文件夹中的 css？
【发布时间】：2019-12-27 14:19:54
【问题描述】：

我正在从 _document.js 中的 api 调用中获取数据，并根据数据放置条件使用 Link 标签。

我试图将 public/static/ 文件夹中的 css 文件包含在 _document.js 或 layout.js 文件，但不工作。

layout.js 文件

import React from 'react';
import Head from 'next/head'
...
<Head>
    <link rel="stylesheet" href="public/static/ed_style.css" />
</Head>
...

【问题讨论】：

你可以做import './folderpath/file.css';
我正在对所有页面中的数据进行全局共享，并且基于来自 api 调用的数据，我正在使用标签设置包含 css 的条件。所以不能那样做。

标签： reactjs next.js

【解决方案1】：

我认为您的链接不正确。你可以试试这样的绝对的

 <link rel="stylesheet" href="/static/ed_style.css" />

【讨论】：

【解决方案2】：

您应该使用 import NextHead from 'next/head' 而不是 import Head from 'next/head'

创建自己的 Head 组件：

const Head = () => (
 <NextHead>
  <link rel="stylesheet" href="static/ed_style.css" />
 </NextHead>
)

然后在你的 layout.js 中

import Head from '../components/head.js'

【讨论】：

你把你的条件放在哪里？
您的解决方案正在运行，但由于静态文件夹已被弃用。（查看此github.com/zeit/next.js/blob/master/errors/…）。我将静态文件夹移动到公用文件夹，现在它不起作用
是的，和 public/static 有冲突，如果你用 public 下的静态文件命名你的文件夹，正如你从文档中看到的，你不需要包含 public 目录名.但是，如果您只是输入/static，它会尝试指向您的情况下不存在的默认静态文件夹。
好的，知道了。感谢您的宝贵时间

【解决方案3】：

谢谢你们的时间。我得到了解决方案。

我已将我的 css 文件 ed_style.css 直接放到 public 文件夹并访问如下。

<link rel="stylesheet" href="/ed_style.css" />

它的工作原理

【讨论】：