title: Angular2: How to use bootstrap-sass with @extend and mixins in Angular-CLI?
body: <p>I'm trying to use Twitter Bootstrap with Angular 2, SCSS and the scaffold generated by angular-cli</p>
  
  <p>I want to apply the best practice to not litter my markup with Bootstrap-specific CSS classes. Instead I want to apply/use them via @extend or as mixins:</p>
  
  <pre><code>.mybutton {
     @extend .btn;
  }
  </code></pre>
  
  <h3>My problem:</h3>
  
  <ul>
  <li>The SASS compiler throws an error, because it does not know about  <code>.btn</code></li>
  <li>If I add <code>@import "bootstrap";</code> to my <code>.scss</code>-File, it will render the full Bootstrap-CSS in every component css</li>
  </ul>
  
  <h1>What I've done so far</h1>
  
  <ol>
  <li>add <code>@import "bootstrap";</code> to my <code>app.component.scss</code></li>
  <li><p>Apply <code>ViewEncapsulation.None</code> to the <code>AppComponent</code>, so Angular 2 does not apply Shadow DOM emulation and the Bootstrap CSS applies to the whole application</p>
  
  <pre><code> @Component({
      encapsulation: ViewEncapsulation.None
   })
  </code></pre></li>
  <li><p>Include the following block into <code>angular-cli-build.js</code>, so relative <code>@import</code> will work</p>
  
  <pre><code>sassCompiler: {
    cacheExclude: [/\/_[^\/]+$/],
    includePaths: [ 'node_modules/bootstrap-sass/assets/stylesheets' ]
  },
  vendorNpmFiles: [
      ...
      'bootstrap-sass/assets/**/*'           
  ]
  </code></pre></li>
  </ol>