Ionic-app-scripts: bug:ionic-app-scripts build --prod lost some css

Created on 17 Jul 2017 · 10Comments · Source: ionic-team/ionic-app-scripts

_From @steavengong on July 17, 2017 8:53_

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ x ] 3.x

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I use git https://github.com/squallliu/app-scripts-test1 for test
I change the HomePage html
in the ion-content , I use the ion-list

when use ionic-app-scripts build (dev)

It's no problem,

but use ionic-app-scripts build --prod

it's has problem

in ion-label there lost some css

Please check !

Expected behavior:

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 3.5.2

System:

Node       : v7.9.0
OS         : Windows 8.1
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 5.3.0

insert the output from ionic info here

_Copied from original issue: ionic-team/ionic#12381_

Source

jgw96

👍6

Most helpful comment

Any body got solution ? I am still same issue on 24 April 2018 ...

flipmedia on 24 Apr 2018

👍2

All 10 comments

This issue might be a much bigger one, tied most likely to the uglifyjs step in the --prod build.
I'm using the latest "@ionic/app-scripts": "^2.0.2" and in production I started getting no CSS applied whatsoever.
Replacing main.css with the dev version fixes the problem.
This thread is related: https://forum.ionicframework.com/t/css-issues-when-building-in-prod-mode/96775

In short: ionic serve works fine, ionic cordova build browser --prod has broken CSS.

ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : browser 4.1.0
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.1.4
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

vkniazeu on 18 Jul 2017

👍1

The issue is NOT present with "@ionic/app-scripts": "^2.0.0".

vkniazeu on 18 Jul 2017

With "@ionic/app-scripts": "^2.0.1" getting the following error after uglifyjs and webpack are finished during the --prod build:
TypeError: Cannot read property 'forEach' of undefined

vkniazeu on 18 Jul 2017

1114 is related.

vkniazeu on 18 Jul 2017

Hello all! I am going to close this as a duplicate of #1114

jgw96 on 20 Jul 2017

hey guys i just ram into this problem and for me, after upgrading to below configuration, th problem is gone now, NOTE THAT THE ionic-angular VERSION is 3.6.0, that wa what missing for me , I had 3.5.3

Working for me now at,

cli packages:

ionic/cli-plugin-cordova : 1.6.2
ionic/cli-plugin-ionic-angular : 1.4.1
ionic/cli-utils : 1.7.0
ionic (Ionic CLI) : 3.7.0
global packages:

Cordova CLI : 7.0.1
local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.6.0
System:

Android SDK Tools : 25.2.5
Node : v7.5.0
OS : macOS Sierra
npm : 4.1.2

shivamsngh on 7 Aug 2017

👎2

Got the same issue, lost CSS with --prod mode, with the following config:

$ ionic info

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

local packages:

    @ionic/app-scripts : 2.1.4
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v6.11.5
    npm  : 3.10.10 
    OS   : Linux 4.4

Misc:

    backend : pro

kael on 30 Oct 2017

Any body got solution ? I am still same issue on 24 April 2018 ...

flipmedia on 24 Apr 2018

👍2

I have the same problem. When I build without --prod, it works, but with --prod it will simply load a blank page. If I check the console output it says it didn't find couple resource files (ie. main.css).

ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/myuser/Library/Android/sdk)
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 2.15.12
   OS                : macOS High Sierra