Skip to Content
BootstrapPartie 8 — Personnalisation avec Sass8.1 — Importer Bootstrap en Sass

8.1 — Importer Bootstrap en Sass

⏱️ TL;DR — Pour personnaliser, on n’importe pas bootstrap.css mais les fichiers Sass, dans un ordre précis : functions, puis vos variables, puis variables, maps, mixins, root, et enfin les modules voulus. Vos variables doivent venir avant variables pour prendre le dessus (grâce au !default).

🎯 Objectifs

  • Comprendre l’ordre d’import obligatoire.
  • Savoir où placer vos surcharges.
  • Comprendre le rôle de !default.

L’import « tout compris » (personnalisable)

// 1. Functions (nécessaires aux calculs de variables)
@import "bootstrap/scss/functions";
 
// 2. VOS surcharges de variables (AVANT les variables de Bootstrap)
$primary: #7952b3;
$border-radius: .5rem;
$enable-shadows: true;
 
// 3. Les variables de Bootstrap (vos valeurs gagnent grâce à !default)
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
 
// 4. Maps, mixins, root
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
 
// 5. Le reste (ou seulement ce dont vous avez besoin — voir 8.6)
@import "bootstrap/scss/bootstrap";

Pourquoi cet ordre ?

  • functions définit des helpers utilisés dans les valeurs de variables → doit venir en premier.
  • Vos variables doivent précéder variables : Bootstrap déclare ses variables avec !default, qui signifie « seulement si pas déjà défini ». En posant $primary avant, la vôtre l’emporte.
  • maps dépend des variables ; mixins et root s’appuient dessus.

Le mécanisme !default

// dans Bootstrap :
$primary: #0d6efd !default;   // "si non défini ailleurs"

Si vous avez écrit $primary: #7952b3; avant, le !default de Bootstrap ne s’applique pas → votre valeur reste. C’est toute la mécanique de personnalisation.

⚠️ Piège — Mettre vos variables après @import "bootstrap/scss/variables" : trop tard, les valeurs par défaut sont déjà figées et propagées dans les maps. Résultat : vos changements semblent ignorés. Toujours avant.

💡 Pour un dev React / Next.js — Créez un fichier styles/bootstrap.scss avec ce squelette, importez-le une fois dans votre layout. Vous obtenez un Bootstrap à votre thème, compilé par le bundler (Vite/Next gèrent le Sass nativement avec sass installé).

✏️ Exercices

  1. Où placer $primary: #7952b3; pour qu’il soit pris en compte ?

✅ Solution

Après @import "…/functions" mais avant @import "…/variables".

  1. Que signifie !default sur une variable Bootstrap ?

✅ Solution

« Utiliser cette valeur seulement si la variable n’a pas déjà été définie » — ce qui permet de la surcharger en amont.

🧠 Quiz de révision

1. Quel fichier importer en tout premier ?

functions.

2. Vos variables : avant ou après variables ?

Avant.

3. Que fait !default ?

Applique la valeur seulement si la variable n’est pas déjà définie.

4. Pourquoi importer les fichiers Sass plutôt que bootstrap.css ?

Pour pouvoir surcharger les variables et recompiler à sa marque.

5. De quoi maps dépend-il ?

Des variables (donc importées avant).

Chapitre suivant : 8.2 — Variables & options

Vue d'ensemble8.2 — Variables & options