Bootstrap a été introduit dans de nombreux projets en tant que framework CSS, En juin 2020, la version 5.0 alpha a été publiée en tant que mise à niveau majeure de la version.
S'il est utilisé avec les paramètres par défaut, il a été adopté par de nombreux frameworks utilisés depuis de nombreuses années. Il est parfois ridiculisé comme "odeur Bootstrap" Il est possible de modifier de manière flexible l'interface utilisateur en la personnalisant.
Cette fois, dans Bootstrap 5.0 introduit par webpacker dans l'environnement Rails 6.0, Apprenez à personnaliser chaque variable.
Remplacez et modifiez la valeur de _variables.scss définie dans Bootstrap à partir d'un autre fichier.
La méthode présentée dans l'article suivant est une méthode d'application lors de la gestion de css avec webpacker.
http://koyacch.hatenablog.com/entry/2018/02/23/162213
Aussi, je me réfère à la méthode introduite sur la page officielle du lien ci-dessous.
https://v5.getbootstrap.com/docs/5.0/customize/sass/
--Css est géré par webpacker dans les paramètres Rails. (Dans cet article, il est supposé que app / javascript / src / application.scss est placé) --Bootstrap est installé avec un gestionnaire de paquets (tel que yarn). (Dans cet article, on suppose que node_modules / bootstrap est installé)
Copiez bootstrap.scss et _variables.scss situés dans app / node_modules / bootstrap et collez-les dans le dossier app / javascript / src.
app / javascript / src / bootstrap.scss se trouve dans _bootstrap-custom.scss app / javascript / src / _variables.scss renomme le fichier en _bootstrap-custom-variables.
Écrivez le code suivant dans app / javascript / src / application.scss.
application.scss
@import 'bootstrap-custom';
Modifiez app / javascript / src / _bootstrap-custom.scss comme suit.
Changer avant
_bootstrap-custom.scss
@import "~bootstrap/scss/variables";
Après le changement
_bootstrap-custom.scss
/* @import "~bootstrap/scss/variables";
*/
@import "bootstrap-custom-variables";
Il peut être personnalisé en modifiant chaque variable dans app / javascript / src / _bootstrap-custom-variables.
Étant donné que de nombreuses variables sont définies, il est possible d'appliquer l'interface utilisateur d'origine de manière unifiée en fonction des modifications.
Changer avant
_bootstrap-custom-variables
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
Après le changement
_bootstrap-custom-variables
$font-size-base: 0.9 rem !default;
Le snowwshiro que j'utilise actuellement a une finition de type bootstrap en raison de la personnalisation minimale, mais je travaille dur pour le personnaliser pour le renouvellement de cet automne. est.
Recommended Posts