Thursday, February 2, 2017

Webpack bootstrap-loader errors: Can't resolve './bootstrap-styles' and Can't resolve './bootstrap-scripts'

By Hường Hana 2:00 PM , , Leave a Comment

I'm trying to use bootstrap-loader in this angular 2 project. Webpack compilation outputs 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 reproduce:

  1. clone https://github.com/AngularClass/angular2-webpack-starter
  2. npm install
  3. npm install bootstrap-webpack --save
  4. npm install less-loader less --save-dev
  5. add line: require("bootstrap-webpack"); to src/vendor.browser.ts
  6. add some rules to config/webpack.common.js from bootstrap-webpack documentation:
  7. 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's 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" }

1 Answers

Answers 1

As I understood you just want to add bootstarp styles to your project, based on webpack.

The simple solution, which worked for me, was simply adding following to your styles/styles.scss:

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment