How to use Bootstrap 3 and Sass and ng2 bootstrap

Run

npm install --save-dev sass-loader css-to-string-loader  resolve-url-loader file-loader url-loader node-sass
npm install --save bootstrap-sass ng2-bootstrap

Edit config/webpack.common.js by adding this code to the loaders section:

      {
        test: /\.(sass|scss)$/,
        loaders: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']
      },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file" },

Rename src/app/app.style.css to src/app/app.style.scss and add the following line to src/app/app.styles.scss:

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

Change file src/app/app.component.ts to use .scss instead of .css file:

...
  styleUrls: [
    './app.style.scss'
  ],
...

To use directives from ng2-bootstrap we can simply import them into a component, for example home.component.ts:

import { AlertComponent, DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
....
directives: [
  XLarge,
  AlertComponent,
  DATEPICKER_DIRECTIVES
],
...

export class Home {
  // Set our default values
  localState = { value: '' };
  date: Date = new Date();
...

In home.template.html we add:

<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>

Now you should be able to use ng2-bootstrap directives, styles from Bootstrap and also Glyphicons.