Adding external css and js will not working in Gatsby js - reactjs

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.

Answer 1

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.

Answer 2

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.