Styling seems to be missing with --prod flag

[sean-hill]

I just installed this amazing library today, and got it working perfectly using ionic serve, but after using ionic build ios --prod it ends up looking this:

Using this code:

const options: CalendarModalOptions = {
  pickMode: 'range',
  title: 'Select dates',
  closeIcon: true,
  doneLabel: 'Save'
}

const datePicker = this.modalCtrl.create(CalendarModal, {
  options: options
})

datePicker.present()

datePicker.onDidDismiss(date => {
  console.log(date)
})

Any ideas into what may be happening here? Obviously it looks like the CSS is not being applied. Ignore the dark background, that's just my apps theme 👍

cli packages:

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (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.7.0

System:

    ios-deploy : 1.9.2
    ios-sim    : 6.0.0
    Node       : v8.4.0
    npm        : 5.3.0
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235

[sean-hill]

@HsuanXyz here is a repo that reproduces this issue.

[hsuanxyz]

Thank!

[hsuanxyz]

@sean-hill This is a problem with @ionic/app-scripts v3.0.0.

Add this for your ./src/theme/variables.scss, suggestion as an temp solution.

...

@import "ionic.theme.default";

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/

@import "ionic.ionicons";

// Fonts
// --------------------------------------------------

@import "roboto";
@import "noto-sans";

+ // ion2-calendar
+ // --------------------------------------------------
+ @import "../../ion2-calendar/dist/components/calendar-week.component";
+ @import "../../ion2-calendar/dist/components/calendar.component";
+ @import "../../ion2-calendar/dist/components/month.component";
+ @import "../../ion2-calendar/dist/components/calendar.modal";

[sean-hill]

@HsuanXyz I thought about doing that, haha. I'll see if it works.

[sean-hill]

@HsuanXyz this works as a temporary solution until app-scripts fixes their stuff. Thanks for the great library!!!

[hsuanxyz]

Thank you for discover. keep open, help the needy.

[sean-hill]

Just created a new issue with app-scripts to see what they think about this issue. 👍

[ihsanberahim]

Thank you @HsuanXyz! My case need another one

@import "../../ion2-calendar/dist/components/month-picker.component";

That's all

[rahianeja]

@sean-hill I was having same issue when i had imported both ion2-calendar and ionic-calendar in my project. Maybe some files conflicting, as soon as i removed other calendar plugin files, ion2-calendar worked seamless..

[nvivekananth]

updated app-scripts to 3.1.2 and the issue resolves

[fernandocode]

This problem still occurs, for those who could not reproduce the problem follows this stackblitz