Valores personalizados para algunas de las variables bootstrap-sass (v2.0.3) que no funcionan

Question

Estoy intentando anular algunas de las variables predeterminadas proporcionadas por el arranque, particularmente algunas configuraciones predeterminadas de color y fuente, pero solo unas pocas parecen ser tomando efecto. Aquí está la parte superior de mi custom.css.scss:

$myOrange:#f89406; 
$myBlueDark: #304269; 
$myBlue: #91BED4; 
$myBlueLight: #D9E8F5; 
$myWhite: #eee; 
$myGrayBlue: #43464C; 

/* colors */ 
$linkColor: $myBlueDark; 
$navbarBackground: $myBlueDark; 
$navbarBackgroundHighlight: lighten($navbarBackground, 10); 
$navbarLinkColor: darken($myOrange, 10); 
$navbarLinkColorHover: $myOrange; 
$bodyBackground: #000; 
$dropdownBackground: $myBlueDark; 
$dropdownLinkColor: $myOrange; 
$hrBorder: $myBlue; 
$heroUnitBackground: lighten($myOrange, 20); 
$dropdownLinkColorHover: $myOrange; 

/* typography */ 
$sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif; 
$baseFontSize: 16px; 

@import 'bootstrap'; 

// ... rest of the css .... 

Aquí he especificado los valores de algunas variables de arranque y esperar que el tipo de letra a ser la especificada y los colores de los enlaces a ser los valores que he configurarlos para.

Sin embargo, he notado que solo unos pocos de estos valores funcionan. P.ej. la fuente en mi página aún permanece en el valor predeterminado de arranque (Helvetica Neue) pero los colores de la barra de navegación cambian a los valores correctos.

He buscado en Internet pero ninguna de las soluciones que encontré funcionó. Hubo un problema registrado que se asemeja a este problema, pero desde entonces se ha cerrado: https://github.com/thomas-mcdonald/bootstrap-sass/issues/102

Me gustaría seguir y comentar sobre ese hilo, pero solo quería asegurarme de que no me falta algo.

Otra cosa a notar aquí, cuando lo haga explícitamente esta tarde en mi custom.css.scss:

@mixin default_font { 
    font-family: "PT Sans Narrow", "Lucida Grande", sans-serif; 
    font-weight: 400; 
} 

body { 
    padding-top: 60px; 
    background-color: #D9E8F5; 

    @include default_font; 
} 

Las fuentes mostrar encima de multa. Estoy especificando background-color aquí debido al mismo problema.

Estoy usando bootstrap-sass v2.0.3. ¿Hay algo que estoy haciendo mal o me falta?

Gracias.

Answer 1

Mientras estaba trabajando en una aplicación de demostración para reproducir mi problema: https://github.com/verma/bootstrap-sass-tests reinicié el servidor de desarrollo de rieles.

Esto parece haber solucionado el problema. No estoy seguro si esto es una solución permanente, por lo que esperaré antes de marcar esta pregunta como respondida.

Answer 2

Hmm, he tenido suerte usando esto para las fuentes y los colores de los enlaces:

$baseFontSize:   17px; 
$baseFontFamily:  'Crete Round', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; 
$baseLineHeight:  20px; 
$altFontFamily:   'Open Sans Condensed', Georgia, "Times New Roman", Times, serif !default; 

$headingsFontFamily: 'Alfa Slab One'; // empty to use BS default, @baseFontFamily 
$headingsFontWeight: normal; // instead of browser default, bold 
$headingsColor:   $blueDark; 

$linkColor:    $blueDark; 

Las variables que se pueden utilizar se pueden encontrar en el _varibles.scss file.

Answer 3

¿Cómo es tu archivo application.css.scss? Me encontré con un problema similar y descubrí que tenía otra hoja de estilo que reemplazaba a mi fuente base, que no quería. Asegúrese de que no tiene otros archivos que causan modificaciones (como scaffolds.css) y asegúrese de que no tiene habilitada la opción require_tree.

Answer 4

Extracción de la barra de navegación estilo - inversa, desde el atributo de clase en la cabecera elemento , puede solucionar el problema.

uso, por ejemplo:

<header class="navbar navbar-fixed-top"> 

Answer 5

I adjunta importancia a la fuente de la familia para el cuerpo y que fija mis problemas.

Contexto: Tuve un problema similar para mi aplicación Rails 5 donde mis fuentes personalizadas (.otf) no se aplicaron.En la consola de desarrollador, veo la fuente del cuerpo aplicada como "Helvetica Neue", lo que creo que proviene de bootstrap-sass.

body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif 
... 

cuando sin marcar, los font-family: "Helvetica Neue", veo mis fuentes como se esperaba, así que sé la tubería activo para mis fuentes personalizadas estaba funcionando correctamente.

antepender! Importante parecía haber solucionado mi problema.

body { 
    font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important; 
}