Import Global SASS file and then import Bootstrap SASS partials per component

[halcyon musk]

I would like to use Bootstrap CSS for our project. My thought is to use a Global SASS file for all the Bootstrap SASS particles we would likely use on every page. (e.g. - grid, buttons, typography, images, containers, etc..)

Then, when we use a card component, we would only include the Bootstrap's card SASS partial in that .astro component file.

The goal is to only include the CSS/SASS we need for each page. Instead of including all of Bootstrap's CSS on every page.

Is there any documentation, or has anyone successfully done something like that with Astro & SASS?

[ancient heart]

Hello! I don't use bootstrap but I use this to import a global file in all my astro components

astro.config.mjs

export default defineConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/styles/global.scss";'
        }
      }
    }
  },
});

Maybe it can work for you too

[halcyon musk]

Hey, thanks for the reply. I do have that set for my global.scss file, but I would also like to include SASS partials inside of my Astro components.

When I include those it just duplicates the referenced global.scss file into each component I have imported. So, I end up with duplicate CSS on each page.

The goal is to have imported SASS partials from components compiled at the bottom of the global.scss file.