Bootstrap 4 beta 3 throws error with angular-cli

Question

I am getting below error while updating my bootstrap package to 4.0.0-beta.3. Let me know if I am missing anything. It was working with 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",

ERROR in ./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 Module build failed: BrowserslistError: Unknown browser major at error (E:*********\node_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (E:*********\node_modules\browserslist\index.js:320:18) at Function.select (E:*********\node_modules\browserslist\index.js:438:37) at E:*********\node_modules\browserslist\index.js:207:41 at Array.forEach () at browserslist (E:*********\node_modules\browserslist\index.js:196:13) at Browsers.parse (E:*********\node_modules\autoprefixer\lib\browsers.js:44:14) at new Browsers (E:*********\node_modules\autoprefixer\lib\browsers.js:39:28) at loadPrefixes (E:*********\node_modules\autoprefixer\lib\autoprefixer.js:56:18) at plugin (E:*********\node_modules\autoprefixer\lib\autoprefixer.js:62:18) at LazyResult.run (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20) at LazyResult.asyncTick (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32) at LazyResult.asyncTick (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at LazyResult.asyncTick (E:*********\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at processing.Promise.then._this2.processed (E:*********\node_modules\postcss-loader\node_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

Answer 1

You can use Bootstrap 4 beta 3, but first edit bootstrap.json/package.json in node_modules/bootstrap:

"browserslist": [
"last 1 major version", <----- delete this line
">= 1%", <----- delete this line
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
],

It looks like the last n major versions syntax was added in browserList 2.4 and autoprefixer updated to version 2 of browserList in version 7.0.

So, any version of autoprefixer above 7.0 should work.

Updating the autoprefixer should also do the job for you.

Answer 2

This is caused by an known issue of angular-cli , the temp fix is

• Do not reference bootstrap's css/scss in .angular-cli.json,

• Import bootstrap's scss file in the style.scss file of your app like this:

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

for more details, please look at my ng-seed repo.

Answer 3

I'm not using angular, but faced with the same issue with bootstrap v."4.0.0":

import "bootstrap/scss/bootstrap.scss";

Adding "autoprefixer": "^7.2.5" to my package.json worked for me.

Answer 4

I've upgraded to Angular CLI 1.7.x and it started working fine. I recommend this solution. I mean upgrading the Angular CLI and it should work for you!

@Yashwanth M solution should work in the worst case scenario!