How to include bootstrap mixins in a Angular2 webpack starter kit

Question

From the base webpack-starter for angular2, I have added in ng2-boostrap by simply including in the index.html:

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

And in my app.module.ts I added a:

import { AlertModule, DatepickerModule } from 'ng2-bootstrap';

And then I see a nice Datepicker by adding a html snippet of

    <alert type="info">Hello from ng2-bootstrap  {{ date.toDateString() }}</alert>
<div style="display:inline-block; min-height:290px;">
  <datepicker [(ngModel)]="date" showWeeks="true"></datepicker>
</div>

to my home.component.html. And all seems great.

But then I created another component, all is good until I attempt to add a bit more scss of:

    .btn-facebook {
      @include button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight);
    }
    .btn-twitter {
      @include button-variant($btnText, $btnTwitterBackground, $btnTwitterBackgroundHighlight);
    }
    .btn-google-plus {
      @include button-variant($btnText, $btnGooglePlusBackground, $btnGooglePlusBackgroundHighlight);
    }
    .btn-github {
      @include button-variant($btnTextAlt, $btnGithubBackground, $btnGithubBackgroundHighlight);
    }

Immediately I see:

Module build failed: 
@include button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight);
      ^
  No mixin named button-variant

Being bring new to webpack and angular2, I am a bit clueless how to add these mixins to the build. You help is much appreciated.

Answer 1

In order to use bootstrap mixins inside your .scss files:

1. You need to have bootstrap installed.

npm install bootstrap

2. You need to include the mixins file in your .scss file. Inside your .scss file:

@import '~bootstrap/scss/_variables'
@import '~bootstrap/scss/_utilities'
@import '~bootstrap/scss/mixins/_buttons';
    
@include button-variant(); // use it