gatsby-bootstrap-sass.md

Install bootstrap

npm install react-bootstrap bootstrap

Install Sass

npm install node-sass gatsby-plugin-sass

Set up Bootstrap scss

• Download source files from getbootstrap.com and copy the scss directory to src/scss/bootstrap
• Configure gatsby-plugin-sass, specifying the bootstrap scss directory created in porevious step:

plugins: [
  {
   resolve: `gatsby-plugin-sass`,
   options: {
     includePaths: ["src/scss/bootstrap"],
   },
 },
]

• create a src/components/layouts.scss file (or use another top level component) with the following sass:

/* import the necessary Bootstrap files */
@import "functions";
@import "variables";

/* put your custom stuff here */

/* finally, import Bootstrap */
@import "bootstrap"

You don't actually need to download the files from the website since you already installed them with the bootstrap npm package.
You can configure gatsby-plugin-sass like so:

plugins: [
  {
   resolve: `gatsby-plugin-sass`,
   options: {
     includePaths: ["node_modules/bootstrap/scss"],
   },
 },
]

With the path to the node module's scss files. Also the import path inside your scss file will look a little different. Here's mine:

@import "~bootstrap";