Question

我在angular 2项目中使用Webpack模块捆绑器。我需要使用webpack将BootStrap与我的应用程序集成。我使用npm安装了Bootstrap。这是我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"
  }

这是我的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 })
]

当我运行npm run build命令时。一切都运行正常我得到关于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

我不确定我错过了什么。我用谷歌搜索了它，但找不到任何解决方案。谁能请帮忙。感谢。

Answer 1

您在ExtractTextPlugin.extract（）方法中使用了错误的参数。您的版本中没有 fallbackLoader 关键字（根据source），并且在最近的版本中不推荐使用它（与 loader ）。

将extract-text-webpack-plugin依赖项更新为最新版本，并按以下方式使用它：

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

}

Webpack：将bootstrap 3与Angular 2应用程序集成

1 个答案: