Question

我正在尝试在此bootstrap-loader中使用angular 2 project。 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

重现的步骤：

clone https://github.com/AngularClass/angular2-webpack-starter
npm install
npm install bootstrap-webpack --save
npm install less-loader less --save-dev
将行require("bootstrap-webpack");添加到src/vendor.browser.ts
从bootstrap-webpack文档中添加一些规则到config/webpack.common.js：
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和文件加载器必须在这里安装确切的版本并且必须使用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

据我了解，您只想基于webpack将bootstarp样式添加到您的项目中。

对我有用的简单解决方案只是在你的styles / styles.scss中添加以下内容：

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

Webpack bootstrap-loader错误：无法解析'./bootstrap-styles'并且无法解析'./bootstrap-scripts'

2 个答案: