ionic: ios simulator/device not compiling SCSS but working in Android and web

Hi all, today I want to share with you about a serious issue in ionic and how to manage it.

If you are an ionic lover, ionic developer or an ionic geek, you will most probably face the issue that some SCSS classes and media queries are not compiling / not binding/ not working when you try to build the app in ios.

I have faced this issue when I run my app in the code iPhone 11 simulator. And then, I checked in the real device also.

Some SCSS are not working in iOS!!!!!

first I thought something wrong with my media query and then I checked each and every SCSS class. But nothing wrong with my SCSS.

It was working like a charm on android devices and but not working on iOS devices.

The thing is ionic apps are different from each other when it comes to the platforms.

In my case, I have used material design to build my app, and when it comes to the ios most of them were overridden.

“To override the initial ionic config for the app” I provide a config in IonicModule.forRoot in the app.module.ts file as mentioned in here, https://ionicframework.com/docs/angular/config

As mentioned in the ionic docs, we can disable the Material Design ripple effect across the app and make the mode into material design (md).

IonicModule.forRoot({
      rippleEffect: false,
      mode: 'md'
    }),

Now, globally I forced my app to use material design, and now my app works in iOS simulator and device with the UI which is the same as in Android and web.

Please kindly note that this is just one way to solve the issue.

Thanks for reading this article! if you have any questions, feel free to comment down.

Cheers!!