# 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

```bash
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`

```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.
