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

Ionic Framework ionic-v3
#1

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
#2

Same problem! :neutral_face:

#3

Same problem, whatever I tried I could not succeded

#4

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.

#5

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

#6

Same problem here…!

#7

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

#8

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

#9

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.

#10

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

#11

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

2 Likes
#12

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

NO styling in ionic start template
#13

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

#14

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

#15

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