Bootstrap 4 beta 3 使用 angular-cli 引发错误答案

【问题标题】：Bootstrap 4 beta 3 throws error with angular-cliBootstrap 4 beta 3 使用 angular-cli 引发错误
【发布时间】：2018-06-10 13:41:08
【问题描述】：

将我的引导程序包更新到 4.0.0-beta.3 时出现以下错误。如果我遗漏了什么，请告诉我。它正在使用 beta.2

"@angular/animations": "^5.1.2",
"@angular/common": "^5.1.2",
"@angular/compiler": "^5.1.2",
"@angular/core": "^5.1.2",
"@angular/forms": "^5.1.2",
"@angular/http": "^5.1.2",
"@angular/platform-browser": "^5.1.2",
"@angular/platform-browser-dynamic": "^5.1.2",
"@angular/router": "^5.1.2",
"bootstrap": "^4.0.0-beta.3",
"@angular/cli": "^1.6.3",
"@angular/compiler-cli": "^5.1.2",
"@angular/language-service": "^5.1.2",

错误 ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./ node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./node_modules/bootstrap/scss/bootstrap.scss 模块构建失败：BrowserslistError: Unknown browser major 出错时 (E:*********\node_modules\browserslist\index.js:37:11) 在 Function.browserslist.checkName (E:*********\node_modules\browserslist\index.js:320:18) 在 Function.select (E:*********\node_modules\browserslist\index.js:438:37) 在 E:*********\node_modules\browserslist\index.js:207:41 在 Array.forEach () 在 browserslist (E:*********\node_modules\browserslist\index.js:196:13) 在 Browsers.parse (E:*********\node_modules\autoprefixer\lib\browsers.js:44:14) 在新浏览器 (E:*********\node_modules\autoprefixer\lib\browsers.js:39:28) 在 loadPrefixes (E:*********\node_modules\autoprefixer\lib\autoprefixer.js:56:18) 在插件处 (E:*********\node_modules\autoprefixer\lib\autoprefixer.js:62:18) 在 LazyResult.run (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20) 在 LazyResult.asyncTick (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32) 在 LazyResult.asyncTick (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) 在 LazyResult.asyncTick (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) 在 processing.Promise.then._this2.processed (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:224:20) 在新的 Promise () @ ./node_modules/bootstrap/scss/bootstrap.scss 4:14-164 @ multi ./node_modules/bootstrap/scss/bootstrap.scss ./node_modules/font-awesome/scss/font-awesome.scss ./node_modules/ng2-toastr/bundles/ng2-toastr.min.css ./node_modules/owl.carousel/dist/assets/owl.carousel.css ./node_modules/owl.carousel/dist/assets/owl.theme.default.css ./node_modules/froala-editor/css/froala_editor.pkgd.min.css ./node_modules/froala-editor/css/froala_style.min.css ./node_modules/ng-pick-datetime/assets/style/picker.min.css ./src/styles.scss

【问题讨论】：

似乎是一个已知问题github.com/angular/angular-cli/issues/9020。为了快速修复，我已将最新的 autoprefixer 7.2.3 文件夹复制到 node_modules/@angular/cli/node_modul。这解决了问题
在复制 autoprefixer 最新文件夹后它起作用了。但是当我运行 ng build --prod 命令时，它再次给出相同的错误。有什么解决办法吗？
对于 Bootstrap 4.0.0（发行版），我刚刚将 CLI 升级到了 1.6.5——它可以工作了！

标签： angular-cli bootstrap-4

【解决方案1】：

您可以使用 Bootstrap 4 beta 3，但首先编辑 node_modules/bootstrap 中的 bootstrap.json/package.json：

“浏览器列表”：[
"last 1 major version", 删除此行
">= 1%", 删除此行
“铬 >= 45”，
"火狐 >= 38",
"边 >= 12",
“资源管理器 >= 10”，
“iOS >= 9”，
"Safari >= 9",
“Android >= 4.4”，
“歌剧 >= 30”
],

看起来 last n 个主要版本 语法已添加到 browserList 2.4 并且 autoprefixer 更新到 browserList 的第 2 版7.0 版。

因此，7.0 以上的任何版本的 autoprefixer 都应该可以工作。

更新自动前缀也应该为您完成这项工作。

【讨论】：

我尝试了同样的方法，它适用于 angular CLI 1.5.2，但升级自动前缀解决方案对我不起作用！

【解决方案2】：

这是由 angular-cli 的 known issue 引起的，临时修复是

不要在.angular-cli.json中引用bootstrap的css/scss，
将 bootstrap 的 scss 文件导入您应用的 style.scss 文件中，如下所示：
```
scss
@import '~bootstrap/scss/bootstrap.scss';
```

更多详情，请查看我的ng-seed repo。

【讨论】：

是的@zhimin 我也这样做了。但是，prod build 仍然抛出错误。它在 ng build --prod 上没有给你任何错误吗？
谢谢！我试着变得圆滑，让 angular-cli.json 把它带进来......回到原来的@import，它又工作了......

【解决方案3】：

我没有使用 angular，但在 bootstrap v."4.0.0" 中遇到了同样的问题：

import "bootstrap/scss/bootstrap.scss";

将 "autoprefixer": "^7.2.5" 添加到我的 package.json 对我有用。

【讨论】：

它没有帮助我。

【解决方案4】：

我已升级到 Angular CLI 1.7.x，它开始正常工作。我推荐这个解决方案。我的意思是升级 Angular CLI，它应该适合你！

@Yashwanth M 解决方案应该在最坏的情况下工作！

【讨论】：