Comment étendre/modifier (personnaliser) Bootstrap 4 avec SASS
Je souhaite créer un thème de site Web basé sur Bootstrap. Je souhaite étendre les composants par défaut de Bootstrap et en modifier certains. Pour cela, j'aurais besoin de accès aux variables SASS définies par Bootstrap pour pouvoir les remplacer.
Je pensais cloner Bootstrap à partir de GitHub et le changer directement, mais j'ai entendu dire que ce n'était pas une bonne pratique. Pourriez-vous me donner un conseil s'il vous plaît?
Voici comment remplacer/personnaliser Bootstrap 4 avec SASS ...
Vous pouvez conserver les remplacements et les personnalisations dans votre propre fichier custom.scss, séparé des fichiers source Bootstrap SASS. De cette manière, les modifications que vous apportez n’affecteront pas la source Bootstrap, ce qui facilitera considérablement les modifications ou la mise à niveau ultérieure de Bootstrap.
1- Envisagez la structure de dossiers SASS de Bootstrap, à côté de votre custom.scss...
|-- \bootstrap
| |-- \scss
| | |-- \mixins
| | |-- \utilities
| | |-- bootstrap.scss
| | |-- variables.scss
| | |-- functions.scss
| | |-- ...more bootstrap scss files
| custom.scss
2- Dans votre custom.scss, importez les fichiers Bootstrap qui sont nécessaires pour les remplacements. (Habituellement, il ne s'agit que de variables.scss. Dans certains cas, avec des personnalisations plus complexes, vous aurez peut-être également besoin des fichiers functions, mixins et d'autres fichiers Bootstrap.). Apportez les modifications, puis @import "bootstrap". Il est important d'importer Bootstrap after les modifications ...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* make changes to the !default Bootstrap variables */
$body-color: green;
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
2a (facultatif) - Vous pouvez également étendre les classes Bootstrap existantes} _ après le @import "bootstrap"; pour créer de nouvelles classes personnalisées. Par exemple, voici une nouvelle classe .row-dark qui étend (hérite de) la classe Bootstrap .row et ajoute ensuite une couleur de fond.
/* optionally create new custom classes from existing classes */
.row-dark {
@extend .row;
background-color: #333333;
color: #ffffff;
}
3- Compilez le SASS (node-sass, gulp-sass, webpack/NPM, etc.). La sortie CSS contiendra les remplacements! N'oubliez pas de vérifier les includePaths si vos @imports échouent. Pour une liste complète de variables que vous pouvez remplacer, voir le fichier variables.scss . Il y a aussi ces variables globales .
Démarrage de Bootstrap SASS sur Codeply
En résumé, voici comment cela fonctionne:
1_ Tout d'abord, lorsque le fichier custom.scss est traité à l'aide de SASS, les valeurs par défaut sont définies dans le bootstrap/variables.scss.
2_ Ensuite, nos valeurs personnalisées sont définies, ce qui remplacera toutes les variables pour lesquelles les valeurs par défaut sont définies dans bootstrap/variables.scss.
3_ Enfin, Bootstrap est importé (@import "bootstrap"), ce qui permet au processeur SASS (compilateur A.K.A.) de générer tout le CSS approprié en utilisant à la fois les valeurs par défaut de Bootstrap et les remplacements personnalisés.
Pour ceux qui ne connaissent pas le SASS, essayez cet outil que j'ai créé.
Regarde aussi:
Comment obtenir 15 colonnes dans Bootstrap 4 dans SASS CSS?
Tailles de grille Bootstrap v4/Sass List
Personnalisation du modèle CSS Bootstrap
Extension de Bootstrap 4 et SASS
La version Github de Bootstrap change toujours puisque la fondation elle-même est constamment mise à jour. Sans parler de la structure de Bootstrap, il ne compile pas nécessairement la manière dont votre compilateur SASS exportera. La meilleure pratique consiste à le structurer de la manière qui vous convient le mieux.
Voici comment je structure habituellement mon projet entier
/style/
/style/theme.scss
/style/theme.min.css
/style/bootstrap.scss
/style/bootstrap.min.css
/style/bootstrap/{subfiles}
/style/bootstrap/mixins/{subfiles}
/style/bootstrap/utilities/{subfiles}
/scripts/
/scripts/bootstrap.min.js
/scripts/main.min.js
/scripts/bootstrap/
Cela suppose que vous avez un minass sass et js.