Niveau 4 - Vite, Sass!
Bien que non essentiel, il est fortement recommandé d'avoir complété le niveau 3 et l'exercice sur l'essentiel MVC avant d'entamer celui-ci.
Avant d'aller plus loin, il est bien sûr possible de continuer à utiliser Bootstrap via le css précompilé. Cela ne pose pas problème en soi. Par contre, que faire si on veut changer la couleur par défaut primaire de Bootstrap? La couleur utilisée pour les boutons, par exemple.
Allons-nous réécrire toutes les classes contenant primary et les redéfinir avec !important simplement pour changer une couleur?
.btn-primary {
background-color: red !important;
}
Ce serait fastidieux, sans même prendre en considération tous les changements requis comme les états :hover, :focus, etc.
C'est ici que le Sass entre en scène. Sass est une extension de CSS, ajoutant des règles supplémentaires, des variables, mixins, héritage de sélecteurs, etc.
Il peut être plus facile maintenant qu'autrefois d'apporter des modifications à Bootstrap sans Sass puisque la majeure partie des navigateurs supporte les variables css côté client et que Bootstrap en fait usage, mais Sass offre tout de même plusieurs avantages que nous verrons.
Comme Bootstrap est lui-même écrit en Sass, on peut redéfinir des variables utilisées par ce dernier et compiler une version personnalisée du CSS. Par exemple, nous pourrions décider de changer la variable $primary utilisée pour tous les styles -primary et automatiquement, tous les composants seront affectés par le changement.
Cependant, les navigateurs ne supportent pas nativement le Sass, il faut le compiler en CSS.
Pour compiler le Sass du projet et Bootstrap, nous allons utiliser Vite.
Il permet d'effectuer ce qui est communément appelé le bundling, soit de regrouper plusieurs modules/fichiers JavaScript ou CSS/SCSS en un seul fichier utilisé par l'application (ex.: app.js, app.css).