How to change $screen-breakpoints

It seems impossible to change the $screen-breakpoints sass-variable. I understand that this can not be a css variable and thus needs to be set at compile time through a sass-variable.

I have found the defaults in themes/ionic.globals.scss and have tried overwriting them in both global.scss (before and after import of ionic scss) and in variables.scss but the grid is still using the defaults.

Interrestingly css utilities like .ion-hide-md-up is working with my breakpoints, but fx the host styling of ion-col padding is based on default screen-breakpoints.

Besides I can see in the code for ion-col that it uses hardcoded screenbreakpoints in utils/media.ts to check for matches.

So my question is what is the correct way to set new screen breakpoints?

2 Likes