Personalització de Bootstrap amb Sass i Vite

Bootstrap va ser dissenyat per ser personalitzat amb Sass, ja que la majoria dels seus valors (colors, tipografies, mides, etc.) estan definits amb variables Sass.

Instal·lació de Bootstrap

npm install bootstrap

Estratègia de personalització

Per personalitzar Bootstrap sense modificar el codi font original, s'ha de seguir aquest ordre en el fitxer src/scss/custom.scss

1. Sobreescriure les variables: Definir les pròpies variables Sass abans de la importació de Bootstrap. D'aquesta forma les definicions tindran prioritat.

2. Importar les funcions i els mixins: Són necessaris per a la compilació dels components.

3. Importar bootstrap: Importar el fitxer principal de Sass de Bootstrap.

Exemple de src/scss/custom.scss

Exemple de src/scss/custom.scss

// 1. SOBREESCRIURE VARIABLES
// Busca el fitxer node_modules/bootstrap/scss/_variables.scss
// per veure totes les variables que pots canviar.

// Canviem el color primari i el color de fons
$primary: #6f42c1; // Un to de lila
$body-bg: #f8f9fa; // Un fons gris molt clar
$font-family-base: "Roboto", sans-serif; // Utilitza una tipografia diferent
$border-radius: 0.5rem; // Més arrodoniment global

// 2. IMPORTAR FUNCIONS I MIXINS
// Són necessaris per al core de Bootstrap
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// 3. IMPORTAR LA RESTA DE BOOTSTRAP
// Si no necessites tot, pots importar només les parts que vulguis.
// Per simplicitat, importarem tot:
@import "bootstrap/scss/bootstrap";

// Codi CSS/Sass propi addicional, si cal.
.custom-card {
  border: 2px solid $primary; // Aquí pots usar les variables personalitzades!
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

En el moment que es compila boostrap/scss/bootstrap, els seus components llegeixen els valors de les variables que s'han definit, i el CSS resultant tindrà l'aspecte personalitzat.