How to change values ​​of Twitter Bootstrap SCSS variables in Angular2?

Question

Angular

I included the bootstrap styles in the .angular-cli.json file

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "styles.scss"
      ],

and tried to change the variables in the common styles styles.scss
$inverse-bg: cyan;
Nothing happened (

Answer 1

Found such a way. Substitute all bootstrap styles in the styles.scss file:

// Core variables and mixins
@import "~bootstrap/scss/variables";

$brand-inverse: #9e6400; // А тут менять переменные

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/custom";

// Reset and dependencies
@import "~bootstrap/scss/normalize";
@import "~bootstrap/scss/print";

// Core CSS
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";

// Components
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/responsive-embed";
@import "~bootstrap/scss/close";

// Components w/ JavaScript
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";

// Utility classes
@import "~bootstrap/scss/utilities";

Answer 2

All variables are stored in bootstrap/scss/variables
It is enough to change only there