404 error on main.css because of different postcss version requirements

I installed ionic 3 on a fresh node install and started a new project with ionic start myApp sidemenu.

When running ionic serve a page appears in the browser, but looks extremely ugly, because main.css is not generated by ionic. In the terminal window I see the following error: “Your current PostCSS version is 5.2.17, but autoprefixer uses 6.0.8. Perhaps this is the source of the error below.”.

npm list postcss shows me what I believe to be the cause of this problem, being that ionic/app-scripts requires another version of postcss than autoprefixer:
myApp@0.0.1 /home/arjan/Development/Ionic/myApp
└─┬ @ionic/app-scripts@2.0.2
├─┬ autoprefixer@7.1.1
│ └── postcss@6.0.8
└── postcss@5.2.17

How to solve this problem?

2 Likes

Same problem! :neutral_face:

Same problem, whatever I tried I could not succeded

I manually upgraded the version of postcss for app-scripts and the warning went away in the console, but main.css still is not being generated correctly. So base problem exists but I think the postcss version is not the actual cause.

How did you do that upgrade? I also tried that, but I can’t get rid of that old version somehow.

Same problem here…!

I manually edited the package.json inside node_modules/@ionic/app-scripts, set the version and ran npm installed from that directory.

Tested that as well and that indeed doesn’t solve the issue of main.css not being generated.

I’m seeing this too. Whats the common factor?

I just started upgrading an app to the latest ionic. I also updated nodejs to the latest 8.2.x version (npm 5.3.x). Could be any of those things or could also be a broken dependency within npm itself.

Should also point out I’m on windows. Sometimes that the common factor!

someone created issue!
https://github.com/ionic-team/ionic-app-scripts/issues/1142

2 Likes

There is work being done to fix it, for now the workaround of “Change the autoprefixer version to 6.7.2 and then run npm install from the app-scripts folder itself.” solves the issue

This should be fixed now. Please update your app-scripts the latest version and reinstall node_modules

Can confirm that deleting node_modules (and package-lock.json) and running ‘npm install’ fixed it for me.

As a separate issue, running ‘ionic serve’ does the whole would you like to install ionic-angular-cli thing but fails with a general error (Windows 10), rerunning proceeds to build as normal (without the auto added devDependencies).

Delete node_modules and install it new!!!
Update your package.json … npm install