SASS: anula los colores primarios, exitosos, de información, etc. de bootstrap predeterminados

0

Estoy trabajando en Visual Studio Code. Estoy usando Gulp / Node para compilar mi SASS.

Las cosas están funcionando bien, pero por alguna razón no puedo anular esto en Bootstrap:

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;

En el mío propio _variable.scsstengo lo siguiente:

$brand-primary:         darken(#428bca, 6.5%)
$brand-success:         #0aa699;
$brand-info:            #1f3853;
$brand-warning:         #fbb05e;
$brand-danger:          #f35958;
$brand-grey:            #d1dade;

Y me estoy asegurando de que toda mi costumbre .scssvenga después de que se carguen las cosas de arranque, ¡sin embargo, los colores personalizados míos no se muestran!

Aquí está la estructura de los parciales:

styles.scss

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

@import "custom/myappstyles";

myappstyles.scss

@import "modules/variables";

@import "modules/mixins";

@import "modules/layout";

@import "modules/typography";

@import "modules/forms";

@import "modules/buttons";

@import "modules/tables";

@import "modules/navigation-sidebar";

@import "modules/approval-sidebar";

¿Algunas ideas?

1

¿Podría escribir su estructura e importaciones?

ACTUALIZACIÓN: intente poner variables antes de la importación de bootstrap.

3
  • Creo que la estructura y las importaciones son correctas. Con el! Default no es importante si son antes o después de bootstrap. Como puede leer en la documentación. ¿Hay un error de compilación (npm o gulp)? EDITAR: Solo desea anular los colores de arranque simples que no se usan en definiciones individuales, ¿verdad? Entonces tienes que poner tus variables antes de la importación de bootstrap. Porque, en este caso, las variables se sobrescribirán antes de que se compile todo el material de arranque. 2 feb 2017 a las 12:15
  • hmm, ¿por qué debo hacer eso? Pensé que SASS y CSS funcionaron en la regla de que lo que venga después anula lo que viene antes (asumiendo que los selectores son los mismos).
    J86
    2 feb 2017 a las 12:26
  • Esto es cierto, pero todos los componentes de bootstrap se importan dentro de esta importación de bootstrap. Eso significa que todas las variables se compilan en valores y luego importa sus variables, pero los componentes de arranque ya están compilados. Entonces sobrescribes las variables correctamente pero no son de usuario en ninguna parte. 2 feb 2017 a las 14:20