Accessing bootstrap scss variables in angular 2 component : <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>
