title: Foundation 6 / Bootstrap 4 - Correct way to use sass setting file in webpack
body: <p>Project used: <a href="https://github.com/preboot/angular2-webpack" rel="nofollow">https://github.com/preboot/angular2-webpack</a></p>
  
  <p>Foundation 6 comes with a global settings.scss file to customize the look and feel. I was wondering what is the correct way to load this in to my project. </p>
  
  <p>I installed foundation-sites via NPM and added the following line to my vendor.ts</p>
  
  <p><code>import 'foundation-sites';</code></p>
  
  <p>In src/style i have the following two files
  - app.scss
  - _settings.scss </p>
  
  <p>In app.scss i have the following code</p>
  
  <pre><code>@import 'settings';
  @import '~foundation-sites/scss/foundation';
  
  body {
      background: $primary-color;
  }
  </code></pre>
  
  <p>This is working great. When i change the $primary-color var in settings.scss i see the desired result. So far, so good.</p>
  
  <p>Now i want to add a button style to my app.component. So in app.component.scss i first did the following.</p>
  
  <pre><code>button {
    @include button;
  }
  </code></pre>
  
  <p>That wasn't working, missing button mixin. So i added the reference to foundation to the file.</p>
  
  <pre><code>@import '~foundation-sites/scss/foundation';
  
  button {
    @include button;
  }
  </code></pre>
  
  <p>This works, only it is rendering the default button style from foundation and it don't respect the override i made in settings.scss. So i added the reference to settings file:</p>
  
  <pre><code>@import '~src/style/settings';
  @import '~foundation-sites/scss/foundation';
  
  button {
    @include button;
  }
  </code></pre>
  
  <p>And it's working again. It just feels a bit cumbersome to make these two imports on each component. Is there a better way to do this?</p>