8.6 — Un build minimal

⏱️ TL;DR — Vous n’êtes pas obligé d’importer tout Bootstrap. En Sass, après le socle obligatoire (functions, variables, maps, mixins, root), importez seulement les modules voulus (grid, buttons, card…). Résultat : un CSS beaucoup plus léger, ne contenant que ce que vous utilisez.

🎯 Objectifs

Importer le strict nécessaire.
Connaître le socle obligatoire.
Réduire le poids du CSS.

Le socle obligatoire

Ces imports sont requis avant tout module :


@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

Ajouter seulement ce qu’on utilise


// … socle ci-dessus …
 
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/forms";
 
// Les utilitaires (à la fin)
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";

On omet ce qu’on n’utilise pas : carousel, offcanvas, accordion, etc. Le CSS produit ne contient plus ces composants.

Liste des modules principaux

Module	Contenu
`reboot`	le reset
`type`	typographie
`grid`	la grille
`containers`	les containers
`buttons`, `card`, `nav`, `navbar`	composants
`forms`	tous les form controls
`utilities` + `utilities/api`	les classes utilitaires

Côté JavaScript aussi

Importez seulement les plugins JS nécessaires (voir 10.3) :


import { Modal, Dropdown } from 'bootstrap'   // pas tout le bundle

Vérifier le gain

Un build « grille + boutons + forms + utilitaires » pèse une fraction du bootstrap.css complet. Combinez avec la purge (PurgeCSS) pour éliminer les classes utilitaires jamais utilisées (voir Partie 13).

⚠️ Piège — Oublier un module dont dépend un composant : par exemple, importer dropdown sans nav/buttons peut donner un rendu incomplet. En cas de doute, importez les composants proches ; le gain vient surtout de l’omission des gros composants (carousel, offcanvas).

💡 Pour un dev React — Si vous utilisez react-bootstrap, vous importez de toute façon le CSS Bootstrap : un build Sass minimal réduit directement le poids embarqué dans votre bundle Next.js. Chaque composant non importé = du CSS en moins.

✏️ Exercices

Écrire un build Sass contenant uniquement la grille, les boutons et les utilitaires.

✅ Solution

Le socle obligatoire + @import "…/grid"; @import "…/buttons"; @import "…/utilities"; @import "…/utilities/api";.

Quels imports sont obligatoires avant tout module ?

✅ Solution

functions, variables (+ variables-dark), maps, mixins, root.

🧠 Quiz de révision

1. Doit-on tout importer pour utiliser Bootstrap en Sass ?

Non — on importe le socle puis seulement les modules voulus.

2. Quels imports forment le socle obligatoire ?

functions, variables, maps, mixins, root.

3. Où placer les utilitaires dans l’ordre d’import ?

À la fin (utilities puis utilities/api).

4. Comment alléger encore le CSS des utilitaires ?

Par la purge (PurgeCSS) des classes non utilisées.

5. Côté JS, comment n’embarquer que le nécessaire ?

Importer les plugins un à un (import { Modal } from 'bootstrap').

🎉 Fin de la Partie 8 ! Partie suivante : Partie 9 — Color modes & dark mode