28/11/2017 Development / css

Se você for pesquisar no google por override boostrap variables vai encontrar uma grande quantidade de pessoas que necessitam fazer essa mudança em seus projetos.

Aqui vai o pulo do gato oficial

Se você esta usando o generator do angular, provavelmente no arquivo index.scss tem essa linha comentada

/**

* If you want to override some bootstrap variables, you have to change values here.
* The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

*/

aqui você faz o override

/**
* Do not remove the comments below. It's the markers used by wiredep to inject
* sass dependencies when defined in the bower.json of your dependencies
*/
// bower:scss
// endbower

O erro que o pessoal comete é querer mudar direto a variavel 

$brand-primary: #fff // Isso é errado, nao vai funcionar 

Oque tem que fazer é mudar através do MAPA

$gray-100: #f8f9fa;

$gray-600: #868e96;

$gray-800: #343a40;

$red: #dc3545;

$yellow: #ffc107;

$green: #006600; // This is the only variable I wanted to change

$cyan: #17a2b8;

$theme-colors: (

primary: $green,

secondary: $gray-600,

success: $green,

info: $cyan,

warning: $yellow,

danger: $red,

light: $gray-100,

dark: $gray-800

);

Agora funciona!