External CSS/JS in Gatsby

Issue

I need to import external CSS/JS as they are tightly coupled together as I'm using a template and migrating it to Gatsby, but it only works on the root page ( / )

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

This works at the root path, but when routing to a different page it uses a relative path, resulting in errors like:

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

If I changed the path to an absolute path, it no longer works after being built: (gatsby build)

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

Theres so many ways to import external CSS/JS in Gatsby that I'm not sure anymore if this is the proper way.

I've tried importing through html.js, which does the same thing.

Importing directly causes errors as again, it is tightly coupled so a missing file errors the whole process.

Any help?

Solution

2022 update

Since the release of the Script Gatsby component (powered by Partytown) it's much easier adding third-party scripts. Just:

import React from "react"
import { Script } from "gatsby"

function YourPage() {
  return <Script src="https://my-example-script" />
}

export default YourPage

---

Add them like this:

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

You can check for further information about withPrefix in Gatsby's documentation. According to them:

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).

There are also a few posts that may help you to:

• How to use global css style sheet includes with GatsbyJS
• How to include local javascript on a Gatsby page?

Answered By - Ferran Buireu