Gatsby 中的外部 CSS/JS答案

【问题标题】：External CSS/JS in GatsbyGatsby 中的外部 CSS/JS
【发布时间】：2020-09-26 02:47:34
【问题描述】：

我需要导入外部 CSS/JS，因为它们紧密耦合在一起，因为我正在使用模板并将其迁移到 Gatsby，但它仅适用于根页面 (/)

Layout.js

import React from "react"
import Navbar from "./Navbar/Navbar"

import { Helmet } from "react-helmet"

export default function Layout({ children, location }) {
  return (
    <>
      <Helmet>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/fontawesome-all.css" rel="stylesheet" type="text/css" />
        <link href="css/swiper.css" rel="stylesheet" type="text/css" />
        <link href="css/magnific-popup.css" rel="stylesheet" type="text/css" />
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
        <script defer src="js/jquery.min.js" type="text/javascript"></script>
        <script defer src="js/popper.min.js" type="text/javascript"></script>
        <script defer src="js/bootstrap.min.js" type="text/javascript"></script>
        <script
          defer
          src="js/jquery.easing.min.js"
          type="text/javascript"
        ></script>
        <script defer src="js/swiper.min.js" type="text/javascript"></script>
        <script
          defer
          src="js/jquery.magnific-popup.js"
          type="text/javascript"
        ></script>
        <script defer src="js/validator.min.js" type="text/javascript"></script>
        <script defer src="js/scripts.js" type="text/javascript"></script>
      </Helmet>
      <Navbar location={location} />
      {children}
    </>
  )
}

这适用于根路径，但是当路由到不同的页面时，它使用相对路径，导致如下错误：

未在“http://localhost:8000/projects/css/bootstrap.css”解析样式表，因为在严格模式下不允许非 CSS MIME 类型。

如果我将路径更改为绝对路径，则构建后不再起作用：（gatsby build）

[错误] 加载资源失败：在此服务器上找不到请求的 URL。文件：///css/bootstrap.css

在 Gatsby 中导入外部 CSS/JS 的方法有很多，我不确定这是否正确。

我尝试过通过 html.js 导入，它做同样的事情。

再次直接导入会导致错误，因为它是紧密耦合的，所以一个丢失的文件会导致整个过程出错。

有什么帮助吗？

【问题讨论】：

你应该使用绝对路径，同时使用 gatsby serve 来检查 gatsby build 的输出。您复制的警告看起来就像您试图通过直接单击 public/index.html 来检查它

标签： javascript css reactjs gatsby

【解决方案1】：

像这样添加它们：

import { withPrefix, Link } from "gatsby"

import { Helmet } from "react-helmet"

export default function Layout({ children, location }) {
  return (
    <>
      <Helmet>
        <link href={withPrefix('css/bootstrap.css')} rel="stylesheet" type="text/css" />
      //and so son...
      </Helmet>
      <Navbar location={location} />
      {children}
    </>
  )
}

您可以在Gatsby's documentation 中查看有关withPrefix 的更多信息。据他们说：

对于您手动构建的路径名，有一个辅助函数， withPrefix 在生产中添加路径前缀（但不在开发过程中不需要为路径添加前缀）。

还有一些帖子可以帮助您：

【讨论】：