title: Accessing bootstrap scss variables in angular 2 component
body: <p>I'm working on a new Angular2 project built using Angular CLI and have configured the project to use SCSS. I have Bootstrap 4 successfully loaded into my <code>styles.scss</code> file however if I try and access any of Bootstrap's (or my own variables defined in <code>styles.scss</code> from within a component I get <code>Undefined Variable</code> build error. </p>
  
  <p>Are the style files for components compiled before the main entry in the <code>styles</code> node of <code>angular-cli.json</code>? How can I make is so that any variables defined at that global level are available to all components in the application? Thanks!</p>
  
  <p><strong>angular-cli.json</strong></p>
  
  <pre><code>"apps": [
    {
      ...
      "styles": [
        "styles/styles.scss"
      ],
      ...
    }
  ]
  </code></pre>
  
  <p><strong>styles.scss</strong></p>
  
  <pre><code>// Bootstrap
  $enable-flex: true; // Enable Flexbox mode
  @import "../../node_modules/bootstrap/scss/bootstrap";
  </code></pre>
  
  <p><strong>component</strong></p>
  
  <pre><code>.navbar {
    background: $brand-primary; // Undefined variable here
  }
  </code></pre>