Ionic Framework3 missing main.css

Question

Im creating starter template with ionic start projname then ofc cd ./projname and ionic serve And I got tabs template, but without main.css. What I'm doing wrong and how can I resolve this?

UPD: ionic dont want to compile styles

ionic info:

Maybe something wrong with my package.json?

{
  "name": "recepies",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.5.3",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.0.2",
    "@ionic/cli-plugin-ionic-angular": "1.3.2",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project"
}

Answer 1

Cordova plugins will be listed in:
config.xml.

Here is the documentation for the ionic cli and here is the Github project where source code for the scripts that are configured in your package.json reside.

Your package.json has a scripts: section:

    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"

According to here, you can invoke them with 'npm run clean','npm run build', or `npm run ionic:build'. Try those. I hope that will delete and rebuild the www/build folder for you so it contains the main.ss that you see the errors for in your Chrome console.

If you still have problems, please post content of your index.html, maybe there is something missing that generates the CSS off the Sass files. Do you for example have this in yours?

 <script src="build/polyfills.js"></script>
 <script src="build/main.js"></script>

If all else fails try "@ionic/app-scripts": "1.3.7", in the devDependencies of your package.json, or some other version that doesn't conflict.
It seems to be broken on and off with various releases for some reason.

Answer 2

UPDATE 2: browserslist@2.2.2 fixes the bug. Just upgrade it (npm install browserlist@2.2.2) or delete node_modules folder and re-run npm install.

UPDATE: As Alicelf says, downgrading app-scripts isn't enought. The problem is in browserslist@2.2.1 (pull request is waiting for merge the fix), then downgrading it to 2.2.0 fixed the vendor.js and the main.css problems.

npm install browserslist@2.2.0 --save-dev

It's because an issue with the app-scripts version and dependencies.

Downgrade it to v1.3.7 fixed the problem to me.

npm install @ionic/app-scripts@1.3.7 --save-dev

You could see the issue here: https://github.com/ionic-team/ionic/issues/12441 (closed)

and here: https://github.com/ionic-team/ionic/issues/12442

Answer 3

This was a bug, that ate my day =/ Now solved.

"Upgrade back to the latest version of app-scripts"

https://github.com/ionic-team/ionic/issues/12442