Adding external css and js will not working in Gatsby js

Question

I am trying to use my template to build a project in the gatsby js but all the CSS and js aren't working.

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import {Helmet} from 'gatsby'


import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Helmet>

        <link href="js/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>
        <link href="js/vendor/slick/slick.min.css" rel="stylesheet"/>
        <link href="js/vendor/fancybox/jquery.fancybox.min.css" rel="stylesheet"/>
        <link href="js/vendor/animate/animate.min.css" rel="stylesheet"/>

        <link href="css/style-light.css" rel="stylesheet"/>

        <link href="fonts/icomoon/icomoon.css" rel="stylesheet"/>

        <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"/>


        <script src="js/vendor/jquery/jquery.min.js"></script>
        <script src="js/vendor/bootstrap/bootstrap.bundle.min.js"></script>
        <script src="js/vendor/slick/slick.min.js"></script>
        <script src="js/vendor/scrollLock/jquery-scrollLock.min.js"></script>
        <script src="js/vendor/instafeed/instafeed.min.js"></script>
        <script src="js/vendor/countdown/jquery.countdown.min.js"></script>
        <script src="js/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
        <script src="js/vendor/ez-plus/jquery.ez-plus.min.js"></script>
        <script src="js/vendor/tocca/tocca.min.js"></script>
        <script src="js/vendor/bootstrap-tabcollapse/bootstrap-tabcollapse.min.js"></script>
        <script src="js/vendor/isotope/jquery.isotope.min.js"></script>
        <script src="js/vendor/fancybox/jquery.fancybox.min.js"></script>
        <script src="js/vendor/cookie/jquery.cookie.min.js"></script>
        <script src="js/vendor/bootstrap-select/bootstrap-select.min.js"></script>
        <script src="js/vendor/lazysizes/lazysizes.min.js"></script>
        <script src="js/vendor/lazysizes/ls.bgset.min.js"></script>
        <script src="js/vendor/form/jquery.form.min.js"></script>
        <script src="js/vendor/form/validator.min.js"></script>
        <script src="js/vendor/slider/slider.js"></script>
      <script src="js/app.js"></script>
      </Helmet>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>

      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

But all the files not included any CSS or JS from this example.

Here are all files

Tell me if I am doing something wrong. Any help would be appreciating.

score 3 · Answer 1 · answered Mar 22 '20 at 08:31

After doing lots of research and @Ferran reply and these post

How to include local javascript on a Gatsby page?

How to use global css style sheet includes with GatsbyJS

I have been completed like this.

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"


import Header from "./header"
import "./layout.css"
import "../../static/js/vendor/bootstrap/bootstrap.min.css"
import "../../static/js/vendor/slick/slick.min.css"
import "../../static/js/vendor/fancybox/jquery.fancybox.min.css"
import "../../static/js/vendor/animate/animate.min.css"
import "../../static/css/style-light.css"
import "../../static/fonts/icomoon/icomoon.css"

// import "https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"

// import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"




const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Helmet>
        <script src={withPrefix('js/vendor/jquery/jquery.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/slick/slick.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/scrollLock/jquery-scrollLock.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/instafeed/instafeed.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/countdown/jquery.countdown.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/imagesloaded/imagesloaded.pkgd.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/ez-plus/jquery.ez-plus.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/bootstrap-tabcollapse/bootstrap-tabcollapse.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/isotope/jquery.isotope.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/fancybox/jquery.fancybox.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/cookie/jquery.cookie.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/bootstrap-select/bootstrap-select.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/lazysizes/lazysizes.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/lazysizes/ls.bgset.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/form/jquery.form.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/form/validator.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/slider/slider.js')} type="text/javascript" />
        <script src={withPrefix('js/app.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/bootstrap/bootstrap.bundle.min.js')} type="text/javascript" />
        <script src={withPrefix('js/vendor/tocca/tocca.min.js')} type="text/javascript" />
        {/* <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> */}
      </Helmet>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>

      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

I hope anyone won't waste at the same time as I wasted.

My sincere gratitude. Just as an additional note, nowadays you shall use `{ Helmet }` instead of `Helmet` as per the [documentation](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/#compatibility-with-react-168-useeffect-hook). — Diego Fortes, Nov 14 '20 at 07:51

Ferran Buireu · Accepted Answer · 2020-03-21T18:32:19.250

According to Gatsby's docs you need to point your static/external assets using relative paths, such as (extracted from their documentation):

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in the “Importing Assets Directly Into Files” page.
  return <img src={'/logo.png'} alt="Logo" />;
}

Without knowing your project folder structure it seems that your issue is related to this. Try to use relative paths in your component. If you have kept the Gatsby default structure, I would suggest something like this:

    <link href="../js/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>
And so on...

I've replied your structure on my project and it should work with ../js/your/path/to-file,../css/your/path/to-file, etc.

How to import CDN Javascript and Font links in projects? – sushildlh Mar 22 '20 at 08:30 — sushildlh, Mar 22 '20 at 08:30

Adding external css and js will not working in Gatsby js

2 Answers2