Not able to build when I add bootstrap.css (or scss) to angular-cli.json

[Ratikant01]

Not able to add bootstrap css/scss to angular-cli.json style list - getting below error!

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.scss" ],

Versions

    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"

Repro steps

• ng new ngapp --routing --style=scss
• npm install --save @ ng-bootstrap / ng-bootstrap
• npm install --save bootstrap@next
• Try to add bootstrap css / scss in angular-cli.json

Observed behavior

Getting below error:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
    at error (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\browserslist\index.js:320:18)
    at Function.select (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\browserslist\index.js:438:37)
    at D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\browserslist\index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\autoprefixer\lib\browsers.js:39:28)    at loadPrefixes (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)                                                                                         at processing.Promise.then._this2.processed (D:\Study\SelfCare\SelfCareWebClient\src\main\ngapp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
    at new Promise (<anonymous>)
 @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
 @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.scss

[clydin]

Thanks for reporting this issue. However, this issue is a duplicate of an existing issue #9020. Please subscribe to that issue for future updates.

[yaswanth89kumar]

The same problem i faced today.

I found my CLI was not upgraded. I upgraded my CLI globally and locally and it worked fine. So always its good to upgrade our Angular CLI and then try to install packages.

[abbasi-saqib]

You might find this kind of error as Angular-cli uses src folder so you have to go to one directory back

Just update this path in you angular-cli.json file:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" , "styles.css" ],

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}