Thanks for the clarification, Bilal. Since you're using Sanity (likely with a Gatsby front end), here's the Markdown-formatted guide tailored specifically for a Sanity + Gatsby setup with Bootstrap and SASS customization.

🛠️ Customize Bootstrap with SASS in a Gatsby + Sanity Project

When developing a website, you may want to tailor a CSS framework like Bootstrap to fit your design needs — changing primary colors, font sizes, heading styles, etc. Here's how to easily customize Bootstrap using SASS in a Gatsby.js frontend for your Sanity-powered website.

✅ Step 1: Install Required Packages

Install React Bootstrap and Bootstrap:

npm install react-bootstrap bootstrap

✅ Step 2: Install SASS Support for Gatsby

Install Gatsby's SASS plugin:

npm install gatsby-plugin-sass

Then, add it to your gatsby-config.js:

module.exports = {
  plugins: [
    // other plugins
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require("sass"),
      },
    },
  ],
};

✅ Step 3: Create a Global SCSS File

Create a file named styles.scss inside the src folder of your Gatsby project.

your-project/
├── src/
│   └── styles.scss

✅ Step 4: Import Bootstrap CSS

In your gatsby-browser.js, import the base Bootstrap CSS for core styles:

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

✅ Step 5: Customize Bootstrap Using SASS

In src/styles.scss, define your custom Bootstrap variables before importing Bootstrap:

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

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

⚠️ Make sure your custom variables come before the @import to override defaults properly.

✅ Step 6: Import Styles in Layout Component

In your layout component (e.g. src/components/Layout.jsx), import the global stylesheet:

import "../styles.scss";

🎉 Done!

Your Gatsby + Sanity site is now using a custom Bootstrap theme powered by SASS. You can now style your components consistently with your chosen theme.

Let me know if you want to extend this with Sanity-specific style injection or portable text styling.

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