How to include boot mixers in the starter kit for Angular2 web package

Question

From the basic webpack-startter for angular2, I added to ng2-boostrap, just by including in 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, adding an html snippet

    <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 everything seems wonderful.

But then I created another component, everything is fine until I try to add a little more scss:

    .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 new to webpack and angular2, I don’t know a bit how to add these mixins to the assembly. You really appreciate your help.

Answer 1

In ordet to use bootstraps in your scss files

1- you need to install the boot box

  npm install bootstrap 

2- mixin scss

scss :

@import '~bootstrap/scss/_variables'
@import '~bootstrap/scss/_utilities'
@import '~bootstrap/scss/mixins/_buttons';

@include button-variant(); // use it