CODEWITHSUNDEEP
angulartwitter-bootstrap-3webpack
Jerald
Jerald

Reputation: 4048

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

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

Upvotes: 4

Views: 2347

Answers (2)

solarc
solarc

Reputation: 5738

I got it working, had to install several loaders (bootstrap-webpack doesn't seem to depend on them), for url-loader and file-loader had to install the exact version here and had to use webpack 1 (one of the packages depends on it):

//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'}
    ]
}

Then add require("bootstrap-webpack"); and run webpack and somehow it works!

Upvotes: 2

Sargon
Sargon

Reputation: 262

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');

Upvotes: 1

Related Questions