Webpack build fails on adding bootstrap.min.css from node_modules in angular-cli.json

[amritpandey23]

Initial Details:

Bootstrap: ^4.0.0-beta.3
Angular: ^5.0.0

Webpack build fails via angular-cli on adding bootstrap.min.css file in angular-cli.json.

Error:

10% building modules 8/11 modules 3 active ...ode_modules/style-loader/addStyles.jsUnknown error from PostCSS pl
ugin. Your current PostCSS version is 6.0.14, but autoprefixer uses 5.2.18. Perhaps this is the source of the err
or below.

More 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 (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/browserslist/index.js:37:11)
    at Function.browserslist.checkName (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/browserslist/index.js:320:18)
    at Function.select (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/browserslist/index.js:438:37)
    at /Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/browserslist/index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/browserslist/index.js:196:13)
    at Browsers.parse (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/autoprefixer/lib/browsers.js:44:14)
    at new Browsers (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/autoprefixer/lib/browsers.js:39:28)
    at loadPrefixes (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
    at plugin (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
    at LazyResult.run (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:270:20)
    at LazyResult.asyncTick (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:185:32)
    at LazyResult.asyncTick (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
    at processing.Promise.then._this2.processed (/Users/amritpandey/Desktop/projects/angular_js/my-angular-app/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:224: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.css
ERROR in src/app/app.module.ts(6,33): error TS2307: Cannot find module './header/header.component'.
src/app/app.module.ts(7,31): error TS2307: Cannot find module './footer/footer.component'.

angular-cli.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-angular-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

[vbuser2004]

Same issue here. No problem using Bootstrap 3.3.7

[amritpandey23]

Yes, it works for me as well with bootstrap 3.3.7 but v4beta0.3

[williamgueiros]

fixed in next release.

#9020

now i using 4.0.0-beta.2 without ^

[amritpandey23]

Using 4.0.0beta.2 works? For now?

[filipesilva]

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

[symlo]

Just globally update your angular/cli before starting a new project:
npm i -g @angular/cli
It works with beta 3, too !

[ghost]

try: node_modules/bootstrap/dist/css/bootstrap.min.css

[bachvantung]

[email protected] Vào 19-07-2018 1:57, "Dembrovszky ISTVAN" <[email protected]> đã viết:

…

try: node_modules/bootstrap/dist/css/bootstrap.min.css — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#9042 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AnCBPMtKE-PJ0_2KIOPGn0hLnUznX0yKks5uH4T-gaJpZM4RPovG> .

[supratikNET]

even ~/node_modules/bootstrap/dist/css/bootstrap.min.css is not working for [email protected]

[angular-automatic-lock-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.}