Как менять значения переменных SCSS Twitter Bootstrap в Ангуляре2?

Question

[Святослав Хусамов]

Я в файле .angular-cli.json подключил стили бутстрапа

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

и попытался в общих стилях styles.scss поменять переменные

$inverse-bg: cyan;

Ничего не вышло(

Answer 1

[Святослав Хусамов]

Нашел такой способ. В файле styles.scss подставить все стили бутстрапа:

// 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

[Николай Маринкин]

Все переменные хранятся в bootstrap/scss/variables
Достаточно поменять только там