Bootstrap 4 beta 3 抛出 angular-cli 错误



我在将引导程序包更新到 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 模块构建失败:浏览器列表错误:未知的浏览器专业 错误 (E:******ode_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (E:*********ode_modules\browserslist\index.js:320:18) at Function.select (E:**********ode_modules\browserslist\index.js:438:37) at E:**********ode_modules\browserslist\index.js:207:41 at Array.forEach () at browserslist (E:*********ode_modules\browserslist\index.js:196:13) at Browsers.parse (E:**********ode_modules\autoprefixer\lib\browsers.js:44:14) 在新浏览器 (E:****ode_modules\autoprefixer\lib\browsers.js:39:28) at loadPrefixes (E:*********ode_modules\autoprefixer\lib\autoprefixer.js:56:18) at plugin (E:*********ode_modules\autoprefixer\lib\autoprefixer.js:62:18) at LazyResult.run (E:*********ode_modules\postcss-loaderode_modules\postcss\lib\lazy-result.js:270:20) at LazyResult.asyncTick (E:*********ode_modules\postcss-loaderode_modules\postcss\lib\lazy-result.js:185:32) at LazyResult.asyncTick (E:*********ode_modules\postcss-loaderode_modules\postcss\lib\lazy-result.js:197:22) at LazyResult.asyncTick (E:*********ode_modules\postcss-loaderode_modules\postcss\lib\lazy-result.js:197:22) 在处理中。Promise.then._this2.processed (E:**********ode_modules\postcss-loaderode_modules\postcss\lib\lazy-result.js:224:20) at new 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

您可以使用Bootstrap 4 beta 3,但首先在 node_modules/bootstrap 中编辑 bootstrap.json/package.json:

"browserslist": ["最近 1 个主要版本", <-----删除此行">=

1%", <-----删除此行

"Chrome>= 45","Firefox>= 38","Edge>= 12","资源管理器>= 10","iOS>= 9","Safari>= 9","Android>= 4.4","Opera>= 30">
],







看起来最后 n 个主要版本的语法是在browserList 2.4中添加的,自动前缀器7.0 版中更新到浏览器列表的版本 2

因此,任何高于 7.0 的自动前缀版本都应该有效。

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

这是由 angular-cli 的已知问题引起的,临时修复是

  • 不要在.angular-cli.json中引用引导程序的 css/scss,
  • 将引导程序的 scss 文件导入到应用的style.scss文件中,如下所示:

    scss
    @import '~bootstrap/scss/bootstrap.scss';
    

有关更多详细信息,请查看我的NG-SEDeRepo。

我没有使用角度,但面临着同样的引导 v 问题。"4.0.0":

import "bootstrap/scss/bootstrap.scss";

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

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

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

相关内容

最新更新