title: Angular-CLI: 'ng serve' inlines the Bootstrap multiple times
body: <p>I'm using Angular CLI with Bootstrap 4. After some painful setup I was ready to go. Once the 'ng serve' finishes the build into memory and I open the app, after inspecting some elements I've noticed that the bootstrap classes are present multiple times. </p>
  
  <p>After inspecting the <code>&lt;head&gt;</code> I can see there are <code>&lt;style&gt;</code> elements (3x) and all of them contain the bootstrap classes.</p>
  
  <p>My app setup is as follows:</p>
  
  <pre><code>- SRC
     |- APP
     |   |- TOOLBAR
     |   |      |- toolbar.component.scss
     |   |- app.component.scss
     |- app.scss
     |- variables.scss
  </code></pre>
  
  <p>in variables.scss</p>
  
  <pre><code>@import "../node_modules/bootstrap/scss/bootstrap";
  ...
  </code></pre>
  
  <p>in app.scss, app.component.scss, toolbar.component.scss</p>
  
  <pre><code>@import "./variables"
  </code></pre>
  
  <p>Each time I add another component with its own scss class that imports the 'variables', another <code>&lt;style&gt;</code> content is added with complete Bootstrap.css inside.</p>
  
  <p>in my .angular-cli.json</p>
  
  <pre><code>"styles": [
          "app.scss"
        ],
  </code></pre>
  
  <p>and finally, in my package.json</p>
  
  <pre><code>"dependencies": {
  "@angular/common": "^4.0.0",
  "@angular/compiler": "^4.0.0",
  "@angular/core": "^4.0.0",
  "@angular/forms": "^4.0.0",
  "@angular/http": "^4.0.0",
  "@angular/platform-browser": "^4.0.0",
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/router": "^4.0.0",
  "bootstrap": "^4.0.0-alpha.6",
  "core-js": "^2.4.1",
  "ngx-bootstrap": "^1.6.6",
  "rxjs": "^5.1.0",
  "zone.js": "^0.8.4"
  </code></pre>
  
  <p>},</p>
  
  <p>Any ideas why is it multiplied all the time??</p>