Customize Bootstrap

Customizing Bootstrap with Sass

npm install bootstrap sass

// scss/custom.scss
// 1. Override variables BEFORE importing Bootstrap
$primary:       #6d28d9;   // Purple
$font-size-base: 1rem;
$border-radius:  0.5rem;
$font-family-base: "Inter", system-ui, sans-serif;

// 2. Import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// 3. Add custom styles after
.hero {
    background: linear-gradient(135deg, $primary, darken($primary, 20%));
}

// Build
// npx sass scss/custom.scss css/custom.css

// vite.config.js
css: {
    preprocessorOptions: {
        scss: { additionalData: `@import "./scss/variables";` }
    }
}