title: How to customize bootstrap 4 using angular-cli
body: <p>I have an Angular 4 application using angular-cli 1.0 and Bootstrap 4-alpha6.
  I want to customize Bootstrap 4. E.g. change the color of the primary buttons. </p>
  
  <p>It must be a future proof solution. That means my customizations must survive upgrades of bootstrap at a later point in time.</p>
  
  <p>I have integrated bootstrap by: 
  Adding  <code>"bootstrap": "4.0.0-alpha.6",</code> to the dependencies in my package.json file.
  Furthermore I added </p>
  
  <pre><code>"styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
  </code></pre>
  
  <p>to <code>"apps"</code> in angular-cli.json.</p>
  
  <p>My first try was to create a new file called style.scss, put it into src/assets and also reference it in angular-cli.json.</p>
  
  <p>The content could look like this: </p>
  
  <pre><code>@import "../../node_modules/bootstrap/scss/variables";
  @import "../../node_modules/bootstrap/scss/mixins";
  
  $body-bg:    $gray-dark;
  $body-color: $gray-light;
  </code></pre>
  
  <p>When running <code>ng serve</code> the application comiles fine but I do not see any changes.</p>
  
  <p>Did I even start in the right direction? How would I properly customize bootstrap buttons/styles via sass in a clean angular-cli workflow?</p>
  
  <p>You can find the source here: <a href="https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular" rel="noreferrer">https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular</a></p>