gatsbyjs - how to use bootstrap 4 with gatsbyjs 2

Question

I am new to gatsbyjs. Followed all the tutorials and started working with Saasland template to create a website with gatsbyjs. I've install bootstrap with npm. The template has following vendor specific dependencies:

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--icon font css-->
    <link rel="stylesheet" href="vendors/themify-icon/themify-icons.css">
    <link rel="stylesheet" href="vendors/font-awesome/css/all.css">
    <link rel="stylesheet" href="vendors/flaticon/flaticon.css">
    <link rel="stylesheet" href="vendors/animation/animate.css">
    <link rel="stylesheet" href="vendors/owl-carousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="vendors/animation/animate.css">
    <link rel="stylesheet" href="vendors/magnify-pop/magnific-popup.css">
    <link rel="stylesheet" href="vendors/elagent/style.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">

In gatsby I am using bootstraptheme https://www.npmjs.com/package/typography-theme-bootstrap typography as below:

import Typography from "typography"
import bootstrapTheme from 'typography-theme-bootstrap'

const typography = new Typography(bootstrapTheme)

export default typography

This works fine. Now, when I try to use, for example, nav from template which is as below I am getting errors in webpack for bootstrap specific classes.

<nav class="navbar navbar-expand-lg menu_one menu_four">

I've copied and pasted template specific css into layout.module.css.

So, How do I use bootstrap with gatsbyjs ? How do I use other vendor specific dependencies from template to gatsbyjs ? Should I import bootstrap.min.css into layout.module.css on top of template specific css classes ?

Answer 1

What you can do is add a Bootstrap dependency with npm install bootstrap. Then, create a gatsby-browser.js file at the root of your app. Finally, import Bootstrap with import 'bootstrap/dist/css/bootstrap.min.css';

Answer 2

Here's how I got Bootstrap to work with Gatsby.

npm install [email protected] [I wanted to use bootstrap 3]

In the page you want to load Bootstrap, import it the following way

import 'bootstrap/dist/css/bootstrap.css';
if (typeof window !== 'undefined') {
    window.jQuery = window.$ = require('jquery');
    require('bootstrap');
}