javascript - Gatsby 中的外部 CSS/JS

Question

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

布局.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}
    </>
  )
}

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

Did not parse stylesheet at 'http://localhost:8000/projects/css/bootstrap.css' because non CSS MIME types are not allowed in strict mode.

如果我将路径更改为绝对路径，则构建后不再有效:(gatsby build)

[Error] Failed to load resource: The requested URL was not found on this server. file:///css/bootstrap.css

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

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

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

有什么帮助吗？

Answer 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}
    </>
  )
}

您可以查看有关 withPrefix 的更多信息在 Gatsby's documentation .根据他们:

For pathnames you construct manually, there’s a helper function, withPrefix that prepends your path prefix in production (but doesn’t during development where paths don’t need to be prefixed).

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

How to use global css style sheet includes with GatsbyJS

How to include local javascript on a Gatsby page?