Webpack: Integrating bootstrap 3 with Angular 2 app

Question

I am using Webpack module bundler in my angular 2 project. I need to integrate BootStrap with my application using webpack. I have installed Bootstrap using npm. Here's the snapshot of my package.json

"devDependencies": {
    "@angular/compiler-cli": "2.4.6",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.34",
    "@types/node": "^7.0.0",
    "@types/selenium-webdriver": "~2.53.39",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^2.0.0",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular2-template-loader": "^0.6.0",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~3.0.0-beta.18",
    "codelyzer": "~2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "file-loader": "^0.10.0",
    "find-root": "^1.0.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.0",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.2.2",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.1",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "1.1.0",
    "node-sass": "^4.5.0",
    "npm-run-all": "^4.0.1",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^3.0.1",
    "protractor": "^4.0.14",
    "raw-loader": "0.5.1",
    "rimraf": "~2.6.0",
    "sass-loader": "^6.0.0",
    "script-ext-html-webpack-plugin": "^1.6.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.2",
    "to-string-loader": "^1.1.4",
    "ts-node": "^2.0.0",
    "tslib": "^1.5.0",
    "tslint": "~4.5.1",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.3",
    "typescript": "~2.1.6",
    "url-loader": "^0.5.7",
    "webpack": "2.2.0",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-dev-server": "2.4.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "~3.0.0"
  }

Here's my webpack.common.js:

//rules...
{
          test: /\.css$/,
          include: [
            helpers.root('node_modules','font-awesome','css'),
            helpers.root('node_modules','bootstrap', 'dist', 'css')
          ],
          loader: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: [
              { loader: 'css-loader', query: {sourceMap: true} }
              ]
          })
 }
...
...
...

//plugins
[
..
..
..
new ExtractTextPlugin({filename:'styles.css', disable: false, allChunks: true })
]

When I run npm run build command. everything is working fine bu I get following error regarding to bootstrap.

ERROR in ./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader?{"sourceMap":true}!./~/bootstrap/dist/css/bootstrap.css
Module build failed: Unknown word (1:1)

> 1 | // removed by extract-text-webpack-plugin
    | ^

 @ ./~/bootstrap/dist/css/bootstrap.css 2:21-235
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts

I am not sure what I am missing. I have googled it but could not find any find any solutions. Can anyone please help. Thanks.

Answer 1

You are using wrong arguments in your ExtractTextPlugin.extract() method. There is no fallbackLoader key word in your version (according to the source) and it's deprecated in the most recent one (the same as the loader).

Update the extract-text-webpack-plugin dependency to the latest one and use it in the following way:

{
    test: /\.css$/,
    include: [whatever],
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
    })

}