web-dev-qa-db-fra.com

Remplacement des variables Bootstrap dans Rails avec la gem bootstrap-sass

J'utilise la gemme bootstrap-sass (Bootstrap 3.0) de Thomas McDonald. J'ai suivi le tutoriel Bootstrap and Rails de Daniel Kehoe. 

J'ai application.css.scss qui a la suivante en haut:

 /*
 *= require_self
 *= require_tree .
 */

Et j'ai framework_and_overrides.css.scss qui contient cette ligne:

@import "bootstrap";

Maintenant, j'ai essayé de remplacer les variables d'amorçage ($body-bg: #f00;). J'ai trouvé ici et de les placer dans l'un de ces deux fichiers mais rien ne change. Qu'est-ce que je fais mal?

cssruby-on-railstwitter-bootstrap
33
mikeglaz

Vous pouvez remplacer des variables en redéfinissant simplement la variable before la directive @import. 

Par exemple:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";
54
NARKOZ

voir le cycle d'exécution. dans le fichier d’amorçage, les fichiers sont rendus de cette manière, par exemple nous "obtenons des variables> et nous les appliquons dans la barre de navigation", ce qui se produit réellement lorsqu’il est lancé d’exécuter le fichier d’amorçage. Son présent à l'intérieur du bootstrap, regardez le flux séquentiel d'importation. , les variables obtiennent de bootstrap/variables et la configuration de la couleur vavbar dans bootstrap/navbar, ce qui applique la couleur dans la barre de navigation avec la variable navbar-default-bg.

en réalité, les programmeurs essaient de définir la valeur de la variable après avoir défini la couleur dans la barre de navigation. (avant ou après l'instruction "@importing bootstrap", les modifications de variable ne modifieront pas la couleur de la barre de navigation, vous devez les modifier dans le fichier d'amorçage)

regardez dans le code ci-dessous si vous voulez changer la couleur, vous devez procéder comme suit.

fichier de démarrage

// variables de base et mixins 

@import "bootstrap/variables"; 

// Composants 

@import "bootstrap/navs";

$ navbar-default-bg: rouge; // initialise le $ navbar-default-bg (après avoir importé bootstrap/variables) 

@import "bootstrap/navbar"; ici le réglage de la couleur est performant "

cela fonctionnera bien, analysez le cycle d'exécution.

mais je suggère d'utiliser les autres classes manuelles pour appliquer la variable bg-color au lieu d'utiliser la variable bootstrap.

Réf.: https://github.com/RailsApps/Rails-bootstrap/issues/12

1
errakeshpd