How to Use Custom Theme with Bootstrap Sass and Gatsby.js

When developing a website, you may need to customize some pre-existing CSS frameworks to your own preferences, such as primary and secondary colors, font sizes, and heading styles. However, this can be challenging when starting with new frameworks.

Today, I'll show you how you can easily use Bootstrap with SASS to customize your Gatsby.js website.

---

Step 1:

Install the necessary packages using your package manager (npm or yarn):

npm install react-bootstrap bootstrap

---

Step 2:

Install SASS and the Gatsby SASS plugin as mentioned in the official Gatsby website:

npm install gatsby-plugin-sass

After installation, close your development server and restart it using:

npm start

---

Step 3:

Create a file named styles.scss in your src folder.

---

Step 4:

Open the gatsby-browser.js file and add the following code:

import "bootstrap/dist/css/bootstrap.min.css";

Then, open your gatsby-config.js file and add the following code to your plugins list:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    implementation: require("sass"),
  },
}

---

Step 5:

Open the styles.scss file and add the following:

$theme-colors: (
  "dark": #333333,
  "primary": #f7941d,
);

@import "../node_modules/bootstrap/scss/bootstrap";

Important: Ensure that the @import statement comes after your override styles.

---

Step 6:

Finally, import the SCSS file in your src/components/layout.jsx file:

import "../styles.scss";

This setup will apply your custom Bootstrap theme to your Gatsby.js website.

---

Feel free to contact me for any queries.