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

[monoflash]

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

[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.

[monoflash]

Issue #9020 is closed, but not corrected, as a this issue.
:(

[wags]

@monoflash looks like the fix is coming in #9023 .

[filipesilva]

@monoflash a fix has been merged (#9023) and it will be part of the next release.

[manhhad32]

How to I can fix for project? Install @angular/cli@latest ?

[SamuelMarks]

Good question, I've tried:

npm i -g @angular/cli
npm i -g @angular/cli@latest
npm i -g @angular/cli@next
npm i -g angular/angular-cli

But they all give @angular/cli@1.6.3. I guess I can just npm i -g https://github.com/angular/angular-cli/tarball/master…

I assume we'll get a new release this week though.

EDIT: Even with that github version—silly me on version numbers BTW, you haven't changed it in master's package.json—I am still getting the same error as OP. 😢

[rain01]

Can anyone give some recommendations how to fix this until the new release?
Should I install the older PostCSS or is there a better way?

[igbenic]

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

[SamuelMarks]

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

[clydin]

@SamuelMarks Can you run the following npm ls autoprefixer? Or anyone that is still experiencing the problem.

[aarongranade]

Thanks for your response @clydin in the other thread. My global and local @angular/cli versions are both 1.6.4, but the issue persists. Here is my result from npm ls autoprefixer:

| +-- UNMET PEER DEPENDENCY @angular-devkit/schematics@0.0.45
| +-- autoprefixer@7.2.5
| `-- cssnano@3.10.0
|   `-- autoprefixer@6.7.7

[clydin]

@aarongranade can you put that in a code block (triple backticks)? It's hard to read. The key here is the location of cssnano's dependency on autoprefixer@6.7.7. My guess is the wrong one is being picked up. Removing node modules and the package lock and then installing is an option to reset the package hierarchy. Also if you are comfortable using a beta release, 1.7.0-beta.0 removes cssnano.
EDIT: Strike that last part, css-loader still keeps it around for now but unused.