Solvedangular cli Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.14, but autoprefixer uses 5.2.18.

Versions


    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.3
Node: 9.3.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2
@angular/cli: 1.6.3
@angular/material: 5.0.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

  • ng new aaaa
  • cd ./aaaa
  • npm --save install bootstrap@4.0.0-beta.3
  • npm --save install font-awesome@latest
  • open .angular-cli.json and add to "styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"]
    or
    add to src/styles.css import tags:
    @import "~font-awesome/css/font-awesome.css";
    @import "~bootstrap/dist/css/bootstrap.css";
  • ng build

Observed behavior (Result)

$ ng build
 10% building modules 5/6 modules 1 active ...ules/bootstrap/dist/css/bootstrap.cssUnknown error from PostCSS plugin. Your current PostCSS version is 6.0.14, but autoprefixer uses 5.2.18. Perhaps this is the source of the error below.
 27% building modules 148/151 modules 3 active ...les/font-awesome/css/font-awesome.cssUnknown error from PostCSS plugin. Your current PostCSS version is 6.0.14, but autoprefixer uses 5.2.18. Perhaps this is the source of the error below.
Date: 2017-12-29T15:38:14.380Z                                                         
Hash: 757ba2e752c09f582a2a
Time: 20513ms
chunk {0} polyfills.61df7d7ec492d95bb0b2.bundle.js (polyfills) 61.3 kB [initial] [rendered]
chunk {1} main.2c2b6c0a6d95ad6f48ec.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.05a8233df0488ec91084.bundle.css (styles) 31.2 kB [initial] [rendered]
chunk {3} inline.544b160570af0d4768e7.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
    at error (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:37:11)
    at Function.browserslist.checkName (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:320:18)
    at Function.select (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:438:37)
    at /Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:196:13)
    at Browsers.parse (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/browsers.js:44:14)
    at new Browsers (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/browsers.js:39:28)
    at loadPrefixes (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
    at plugin (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
    at LazyResult.run (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:270:20)
    at LazyResult.asyncTick (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:185:32)
    at LazyResult.asyncTick (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
    at processing.Promise.then._this2.processed (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:224:20)
    at new Promise (<anonymous>)
 @ multi ./node_modules/font-awesome/css/font-awesome.css ./node_modules/bootstrap/dist/css/bootstrap.css ./src/styles.css
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser major
    at error (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:37:11)
    at Function.browserslist.checkName (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:320:18)
    at Function.select (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:438:37)
    at /Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (/Users/kallisto/Downloads/7/aaaa/node_modules/browserslist/index.js:196:13)
    at Browsers.parse (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/browsers.js:44:14)
    at new Browsers (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/browsers.js:39:28)
    at loadPrefixes (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
    at plugin (/Users/kallisto/Downloads/7/aaaa/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
    at LazyResult.run (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:270:20)
    at LazyResult.asyncTick (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:185:32)
    at LazyResult.asyncTick (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
    at LazyResult.asyncTick (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22)
    at processing.Promise.then._this2.processed (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:224:20)
    at new Promise (<anonymous>)
    at runLoaders (/Users/kallisto/Downloads/7/aaaa/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/kallisto/Downloads/7/aaaa/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/kallisto/Downloads/7/aaaa/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/kallisto/Downloads/7/aaaa/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/kallisto/Downloads/7/aaaa/node_modules/postcss-loader/lib/index.js:189:71)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)
 @ ./node_modules/bootstrap/dist/css/bootstrap.css
 @ multi ./node_modules/font-awesome/css/font-awesome.css ./node_modules/bootstrap/dist/css/bootstrap.css ./src/styles.css
18 Answers

✔️Accepted Answer

Installing "bootstrap": "4.0.0-beta.2" instead of "bootstrap": "^4.0.0-beta.3" worked for me

Other Answers:

Ouch, it's still present in @angular/cli 1.6.4:

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major

More Issues: