Ionic-app-scripts: main.css missing when I build with --prod

[squallliu]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

main.css missing when I build with --prod and "ionic_manual_treeshaking" set false

What behavior are you expecting?

the size of main.css is 42K

Which @ionic/app-scripts version are you using?
2.0.2

[danbucholtz]

@squallliu,

Please do not delete our form. You are missing a good amount of required data.

How can I recreate this issue? Please upload a sample repository.

Thanks,
Dan

[squallliu]

@danbucholtz

1. clone https://github.com/squallliu/app-scripts-test
2. npm i
3. build with --prod

styles are missing

[lordgreg]

I can confirm this issue as well.

$ ionic info

global packages:

    @ionic/cli-utils : 1.6.0-alpha.18371e18
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.6.0-alpha.18371e18

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               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

as soon as remove the --prod flag, the styling looks okay.

[MarkChrisLevy]

@danbucholtz I can confirm this as well.

[vkniazeu]

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

[vkniazeu]

1120 is related.

[lordgreg]

@vkniazeu I've just checked your statement with 2.0.2 version installed and it still produced the same issue.

$ 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               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

[danbucholtz]

@squallliu,

I'll test your project out and verify. It could be a Windows thing. Though I did test some apps on windows. Hmmm.

Thanks,
Dan

[bsummersgb]

I'm also experiencing this on OSX

[squallliu]

@danbucholtz

global packages:

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

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.1.4
    OS         : macOS Sierra
    Xcode      : Xcode 8.3 Build version 8E162
    ios-deploy : not installed
    ios-sim    : 5.0.13
    npm        : 4.6.1

[vkniazeu]

@lordgreg, 2.0.2 does give me an error. It's 2.0.0 that works fine for me. FWIW, I'm on Windows.

[danbucholtz]

@squallliu and others,

I can recreate the issue in @squallliu's sample project. I noticed that it has the following config setting:

"config": {
    "ionic_manual_treeshaking": false
  }

Are you all using this setting as well? If I remove this setting, everything works as expected.

Thanks,
Dan

[lordgreg]

HI Dan,

I don't have this setting at all:

{
  "name": "abcdef-ionic",
  "app_id": "",
  "type": "ionic-angular"
}

[danbucholtz]

@lordgreg,

Can you check your package.json? How can I recreate with your project set-up?

Thanks,
Dan

[vkniazeu]

@danbucholtz, no.
I do, however, have a custom webpack config related to #954 and #762 if this is relevant:

"config": {
    "ionic_optimization": "./src/config/webpack.config.js",
    "ionic_webpack": "./src/config/webpack.config.js"
}

[danbucholtz]

That could be part of it, too. Are you doing any custom resolving functionality? That is likely part of the problem I think. Can you modify the sass.js file in node_modules/@ionic/app-scripts/dist/sass.js around this line: https://github.com/ionic-team/ionic-app-scripts/blob/master/src/sass.ts#L112-L116

and add a console.log('moduleFile: ', moduleFile); inside of the forEach.

Please add the output to this thread.

Thanks,
Dan

[vkniazeu]

Yes, I'm resolving using an alias to have a working ENV solution for now while #762 is still being discussed. Here's my webpack.config.js. Coupled with the package.json config it lets me ionic serve and ionic cordova build browser --prod without any issues.

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
  useDefaultConfig.resolve.alias = {
    "@app/config": path.resolve('./src/config/config.' + process.env.IONIC_ENV + '.ts')
  };

  return useDefaultConfig;
}

You want me to add the log statement with 2.0.2, correct?

[vkniazeu]

@danbucholtz , sorry I'm confused as to where to find the output you are asking for.
I've upgraded to 2.0.2 (the problem is present), added the log line, but can't find the output anywhere when doing ionic cordova build browser --prod.

[danbucholtz]

@vkniazeu, can you check if context.moduleFiles is null or an empty array. That could be the problem in the sass.js file.

Thanks,
Dan

[vkniazeu]

@danbucholtz , context.moduleFiles comes up as undefined just before the forEach loop, so the latter is never executed.

[B-Stewart]

I seem to also be getting this behavior with the new version, but only when I run --prod with -l if that is helpful. I'm also on Windows.

[ghost]

I'm on OSX. I'm getting this behavior with the new version ( 2.0.2 and ionic-angular 3.5.3 ), but only when I run --prod --release. if that is helpful.

[vkniazeu]

Reproducible with 2.1.0.

[danbucholtz]

Is there anything unique about your apps? Can you recreate it if you start a new project:

ionic start myApp blank

Thanks,
Dan

[vkniazeu]

@danbucholtz, I'm not able to reproduce the issue with ionic start myApp blank with the default package.json, which uses "@ionic/app-scripts": "2.0.2" and "ionic-angular": "3.5.3" as of today.

I'm going to try to update all other outdated packages one by one to pinpoint the issue.
I do use a custom webpack config (see https://github.com/ionic-team/ionic-app-scripts/issues/1114#issuecomment-316430749).

What about those questions you asked earlier about context.moduleFiles? Were my answers of any help?

Thank you!

[vkniazeu]

@danbucholtz, you are right - there must be something else as ionic start myApp blank works fine after all packages are updated.
I wonder if the removal of the @ionic-native packages or the introduction of some other, or the custom webconfig has anything to do with the problem.
Attached are the package.json files in case you want to take a look

package.zip

[sebaferreras]

@danbucholtz On my end, not all the styles are broken when using the --prod flag, but some of them are. I've created a new app:

ionic start testStylesIssue tabs

And added an ion-list with a few items in the HomePage:

<ion-list>
    <ion-item>
      <h2 text-wrap>Lorem ipsum</h2>
      <p text-wrap>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </ion-item>
    <ion-item>
      <h2 text-wrap>Lorem ipsum</h2>
      <p text-wrap>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </ion-item>
    <ion-item>
      <h2 text-wrap>Lorem ipsum</h2>
      <p text-wrap>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </ion-item>
    <ion-item>
      <h2 text-wrap>Lorem ipsum</h2>
      <p text-wrap>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </ion-item>
    <ion-item>
      <h2 text-wrap>Lorem ipsum</h2>
      <p text-wrap>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </ion-item>
  </ion-list>

This is how it looks like when running ionic cordova run android --prod:

And this is how it looks like when running without the --prod flag:

Please notice the missing margin on each label, inside of the ion-item when using the --prod flag.

Package.json:

{
  "name": "testStylesIssue",
  "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-cordova": "1.4.1",
    "@ionic/cli-plugin-ionic-angular": "1.3.2",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project"
}

[vkniazeu]

I've pinpointed the reason for the CSS breaking in production on my end.
It has to do with the baseUrl property that I added tsconfig.json to accommodate for the custom webpack config and to avoid typescript errors:

    "baseUrl": "./src",
    "paths": {
      "@app/config": ["config/"]
    }

My custom webpack config is essentially based on https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-287401855 and worked fine through "@ionic/app-scripts": "2.0.2".
It is an attempt to have a DEV/PROD environment solution like in Angular. The proposal is at https://github.com/ionic-team/ionic-app-scripts/issues/762.

@danbucholtz, do you have an insight as to why this works differently after 2.0.0?

[KillerCodeMonkey]

it is working again with the latest release!
nice work guys!

[ghost]

@vkniazeu not works for me. When using the --prod flag missing styles on .searchbar-md. @KillerCodeMonkey Which versions do you use?

[KillerCodeMonkey]

"ionic-angular": "3.6.0"
"@ionic/app-scripts": "2.1.3"
"@ionic/cli-plugin-cordova": "1.5.0"
"@ionic/cli-plugin-ionic-angular": "1.4.0"

And i deploy my app as a web app to heroku with:
npm run ionic:build --prod

[vkniazeu]

I use ionic cordova build browser --prod and it messes up the CSS (due to the baseUrl it seems as per above).
When I use npm run ionic:build --prod the generated CSS file seems to also be smaller than it should, but I also get a runtime error in main.js:

Uncaught SyntaxError: Unexpected token ]

[ghost]

@KillerCodeMonkey I use the same versions but not works.
package.txt

[Behnam-r]

I found the problem .. when you build with --prod in android all classes in main.css have a opacity of 0.4
if you remove opacity tick with inspect console(chrome) the work correctly .
i don't know how to fix it.

[KillerCodeMonkey]

strange... now it gets broken again... do not know what happened. After another production deploy the main.css is created but the list styling is broken.

[Behnam-r]

I found solution.
the problem is in variable.scss with number of color variables

https://github.com/ionic-team/ionic-app-scripts/issues/506

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

[ghost]

@Behnam-r I removed the $colors variable in the variables.scss, but it does not work yet.

[sebaferreras]

@Behnam-r I posted a comment before, using the tabs templates just like it is created by the CLI does not work properly, so it seems to be related to something else.

@danbucholtz have you been able to reproduce this issue on your end?

[shivamsngh]

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

[ChomalCalcey]

It's still there even with the following config. Prod breaks css :/

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 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

Node       : v8.1.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
npm        : 5.3.0

[KillerCodeMonkey]

any updates here. I would like to build a prod build because of the smaller file size and execution performance.

But some styles are missing (e.g. lists)

[summerchill]

--prod build also loses css for me

[alexyangjie]

Same for me. Which version is the last working one?

[lordgreg]

I'm currently using the latest one and don't have the issue anymore.

[KillerCodeMonkey]

@lordgreg could you share your exact versions?

did you upgraded to the latest CLI? https://github.com/ionic-team/ionic-cli/blob/master/CHANGELOG.md

[summerchill]

Can you post your ionic info lordgreg?

I've got this

"scripts": {
 "serve-prod": "node --max_old_space_size=8096 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js serve --prod --release --aot",

and that:

[alexyangjie]

I manage to limit the problem to the --optimizejs flag. When running with this flag, some css files are missing.

[lordgreg]

Hi @KillerCodeMonkey, @summerchill, this is my command:

ionic cordova build android --release --prod --aot -- -- --keystore.........

and the ionic info:

cli packages: (C:\Development\__________\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

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

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.0
    npm               : 5.4.0
    OS                : Windows 10

[KillerCodeMonkey]

strange - does not work for me.

But there are only a view styles missing, like when i use ion-grid in ion-item. the widths are not correctly set.

Edit: if i set ion-label explicit to width 100%, everything looks fine *thinking

Also styles like: .label-md { margin: 13px 8px 13px 0; } are missing or the whole ion-label css block is missing

[DavidWiesner]

@danbucholtz here is my list of context.moduleFiles. For readability i only list the once for ionic-angular.
Log for ionic serve with --prod

moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/animations/animation.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app-constants.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/menu-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/content/content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/ion.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/config/config.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/nav-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/nav-params.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/nav-util.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/navigation/view-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/platform/dom-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/platform/key.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/platform/keyboard.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/transitions/page-transition.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/transitions/transition.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/util/dom.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/util/scroll-view.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/util/util.js

But when run serve without --prod

moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/animations/animation.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/action-sheet/action-sheet.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/alert/alert.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app-constants.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app-root.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/app.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/click-block.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/menu-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/app/overlay-portal.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/avatar/avatar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/backdrop/backdrop.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/badge/badge.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/button/button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card-title.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/card/card.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/checkbox/checkbox.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/chip/chip.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/content/content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/datetime/datetime.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/fab/fab-container.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/fab/fab-list.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/fab/fab.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/grid/col.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/grid/grid.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/grid/row.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/icon/icon.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/img/img.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/infinite-scroll/infinite-scroll-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/infinite-scroll/infinite-scroll.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/input/input.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/input/native-input.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/input/next-input.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/ion.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-divider.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-group.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-options.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-reorder-gesture.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-reorder-util.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-reorder.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-sliding-gesture.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item-sliding.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/item.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/item/reorder.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/label/label.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/list/list-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/list/list.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/loading/loading.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-close.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-gestures.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-toggle.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu-types.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/menu/menu.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-impl.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/modal/modal.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-pop-anchor.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-pop.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-push-anchor.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav-push.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/nav/nav.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/note/note.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/option/option.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-column.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-options.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/picker/picker.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-impl.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/popover/popover.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/radio/radio-button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/radio/radio-group.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/range/range-knob.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/range/range.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/refresher/refresher-content.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/refresher/refresher.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/scroll/scroll.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/searchbar/searchbar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/segment/segment-button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/segment/segment.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/select/select-popover-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/select/select.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/show-hide-when/display-when.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/show-hide-when/hide-when.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/show-hide-when/show-when.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/slide.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/slides.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-a11y.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-classes.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-effects.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-events.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-index.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-keyboard.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-pagination.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-parallax.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-progress.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-transition.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-utils.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper-zoom.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/slides/swiper/swiper.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/spinner/spinner.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/split-pane/split-pane.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tab-button.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tab-highlight.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tab.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/tabs/tabs.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/thumbnail/thumbnail.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast-component.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast-controller.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast-transitions.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toast/toast.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toggle/toggle-gesture.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toggle/toggle.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/navbar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-base.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-footer.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-item.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar-title.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/toolbar/toolbar.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/typography/typography.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-footer.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-header.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-item.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-scroll.js
moduleFile:  /Users/foo/app-root/node_modules/ionic-angular/components/virtual-scroll/virtual-util.js

If I understood this right, moduleFiles are all files that are used by the project. But when running production mode this list will be shrinked to the files the are imported directly by a script.
To verify this I add a log console.log('webpack.js after', context.moduleFiles && context.moduleFiles.length); to line 112 in webpack.ts#L112
with --prod webpack.js after 381
without --prod webpack.js after 663

And based on this you are trying to resolve all scss files you will need to import?! But most of the components are just used in the html files without being imported in any script. So trying to resolve the scss files based on the moduleFiles will not work. Thats should be the commit that introduce the issue.

[Richie765]

@DavidWiesner, that is very helpful. Here's a work-around that works for me.

My problem is that the style of an ion-segment inside an ion-item is messed up. I use the same component in another project and there it works fine. With the inspector I saw that Ionic inserts an ion-label in the ion-item which lacks the proper styles.

I looked at context.moduleFiles and saw that the label module wasn't included. In my other project which works, it is included. The project that worked used ion-label in one of its templates while the other didn't.

I added the following in a template and now it works.

<ion-item *ngIf="false">
  <ion-label>Dummy</ion-label>
</ion-item>

[damroyan]

Any updates on this topic?

I still can't found a solution. There all ok with ionic cordova build android, all styles work fine. And zero styles when ionic cordova build android --prod --release.

`
ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.0.1

System:

ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
Node       : v6.11.0
npm        : 4.2.0 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b`

[damroyan]

UPD:

Not found what was happen with prod but found a life hack that solve problem with the build size and speed of Android app. Use next command to build app:

ionic cordova build android --release --aot --minifyjs --minifycss

[Idrimi]

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

worked for me

https://github.com/ionic-team/ionic-app-scripts/blob/master/CHANGELOG.md

[loganadhan-palanisamy]

I have faced same CSS issue when I build with --prod and --release arguments
ionic cordova build android --prod --release
I found my @ionic/app-scripts version was 2.1.4 and it has some problem. So I upgraded it to latest version 3.0.0 and tried, it worked!.

[marcosmlopes]

Same issue here. I tried the following solutions without success:

• tried downgrading ionic-app-scripts to 1.3.4,
• upgrading to @latest or @nightly and
• running ionic build --aot --minifyjs --minifycss && cordova run android --release with or without the --optimizejs flag and running ionic cordova run android --release --aot --minifyjs --minifycss

Strangely enough, if I don't run with the --release flag it seems to work... What the --release flag does under the hood?

ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.2
    npm        : 5.2.0 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9M214v 

package.json

{
    "name": "myApp",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "config": {
        "ionic_sass": "./config/sass.config.js",
        "ionic_copy": "./config/copy.config.js"
    },
    "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.4.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/tsc-wrapped": "^4.4.4",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/google-analytics": "^4.2.1",
        "@ionic-native/in-app-browser": "^4.2.1",
        "@ionic-native/network": "^4.3.0",
        "@ionic-native/onesignal": "^4.2.1",
        "@ionic-native/social-sharing": "^4.2.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/pro": "^1.0.9",
        "@ionic/storage": "2.0.1",
        "autoprefixer": "^7.1.4",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-google-analytics": "^1.8.3",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-x-socialsharing": "^5.2.0",
        "es6-promise-plugin": "^4.1.1",
        "font-awesome": "4.7.0",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "jquery": "^3.2.1",
        "localforage": "^1.5.0",
        "localforage-cordovasqlitedriver": "^1.6.0",
        "moment": "^2.18.1",
        "onesignal-cordova-plugin": "^2.2.0",
        "postcss-value-parser": "^3.3.0",
        "rm": "^0.1.8",
        "rxjs": "5.4.0",
        "slick-carousel": "^1.7.1",
        "sw-toolbox": "3.6.0",
        "swiper": "^3.4.2",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^3.0.0",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "onesignal-cordova-plugin": {},
            "cordova-plugin-x-socialsharing": {},
            "cordova-plugin-google-analytics": {},
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-network-information": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

[danbucholtz]

Is this still an issue with 3.0.0?

Thanks,
Dan

[sebaferreras]

I was not able to reproduce it anymore @danbucholtz, so seems to be fixed on my end.

[DavidWiesner]

@danbucholtz update ionic-app-scripts 3.0.0 fix the issue in my case

[niconaso]

@danbucholtz yes! it's still happening, you can reproduce it with ionic-conference-app

[Heckthor]

Any update on this issue?

[niconaso]

@Heckthor yes! It's fixed in the final version :smiley: