webpackでsassかくときにbootstrapをベースに使う

以下などbootstrap用loaderもあるっぽいけど、
bootstrapで組んでいくというよりはベースにしてextendしたりしながら使いたいのでちょっと違和感がある。
https://github.com/shakacode/bootstrap-loader

なのでsass-loaderでbootstrap使えるように設定したのだけど若干手順がめんどかったのでメモ

手順

1. package.json

$ npm install --save-dev node-sass bootstrap-sass
$ npm install --save-dev webpack
$ npm install --save-dev css-loader style-loader sass-loader file-loader 

2. webpack.config.js

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: 'built'
  },
  module: {
    loaders: [
      //bootstrapのフォントまわりのため
      {
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        loader: 'file'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  }
}

3. アプリかく

src/index.js

require('./stylesheets/main.scss');

//...

src/stylesheets/main.scss

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";