Webpack 引导加载程序错误：无法解析 './bootstrap-styles' 和无法解析 './bootstrap-scripts'

Question

我正在尝试在这个angular 2 project 中使用bootstrap-loader。 Webpack 编译输出错误：

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

重现步骤：

1. 克隆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. 添加行：require("bootstrap-webpack"); 到src/vendor.browser.ts
6. 从 bootstrap-webpack 文档中为 config/webpack.common.js 添加一些规则：
7. npm start

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

Answer 1

我让它工作了，必须安装几个加载器（bootstrap-webpack 似乎不依赖它们），因为 url-loader 和 file-loader 必须在这里安装确切的版本，并且必须使用 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');