Webpack bootloader errors: cannot resolve './bootstrap-styles' and cannot resolve './bootstrap-scripts'

Question

I am trying to use bootstrap-loader in this angular 2 . Compiling Webpack produces errors:

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-styles' in 'd:\web\angular2-webpack-starter\node_modules\bootstrap-webpack'
 @ ./~/bootstrap-webpack/index.js 1:0-66
 @ ./src/vendor.browser.ts
 @ multi vendor

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-scripts' in 'd:\web\angular2-webpack-starter\node_modules\bootstrap-webpack'
 @ ./~/bootstrap-webpack/index.js 2:0-52
 @ ./src/vendor.browser.ts
 @ multi vendor

Steps to play:

• clone https://github.com/AngularClass/angular2-webpack-starter
• npm install
• npm install bootstrap-webpack --save
• npm install less-loader less --save-dev
• add line: require("bootstrap-webpack");tosrc/vendor.browser.ts
• add some rules in config/webpack.common.jsfrom bootstrap-webpack documentation:
• npm start

Rules from bootstrap-webpack documentation :

// bootstrap-webpack has access to the jQuery object
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
// loads bootstrap css.
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=image/svg+xml" }

Answer 1

, (bootstrap-webpack, , ), url- webpack 1 ( ):

//packages.json
{
  "dependencies": {
    "bootstrap-webpack": "^0.0.5",
    "jquery": "^3.1.1",
  },
  "main": "js/entry.js",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.26.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "0.8.1",
    "imports-loader": "^0.7.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "url-loader": "0.5.5",
    "webpack": "1"
  }
}

// webpack.config.js
module: {
    loaders: [
        {test: /\.jsx?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/, query: {presets: ['es2015']}},
        {test: /\.css$/, loader: 'css-loader'},
        {test: /\.(woff|woff2)$/, loader: 'url-loader?limit=10000'},
        {test: /\.ttf$/, loader: 'file-loader'},
        {test: /\.eot$/, loader: 'file-loader'},
        {test: /\.svg$/, loader: 'file-loader'}
    ]
}

require("bootstrap-webpack"); webpack - !

Answer 2

, bootstarp webpack.

, , /styles.scss:

@import url ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');