Add Global Mixins on Ionic v4

Ionic Framework
1

Hi,

Is it possible to add custom global mixins on Ionic 4?

On Ionic v3 I define mixins on app.scss and use it on each page scss file.

app.scss

@import '../../../fluid-type';

@mixin bigger-text {
  @include fluid-type(28px, 42px);
}

page.scss

p{
@include bigger-text
}

On Ionic v4 I have tried to define it into variables.scss inside root and then use it into scss page files but the compilations fails because it not found the mixins

If I define the mixins in each scss page file it works correctly

Where should be defined this ‘global’ mixins to can use on each page scss?

1 Like
2

As far as I saw you would have to import the mixin in every scss where you would like to use it. Maybe I’m wrong but didn’t found any other solutions so far.

3

I know.

On Ionic v3 works fine but on Ionic v4 not.

Any ‘clean’ workaround?

4

not that I know, I wish

5

As a temporal workaround.

I have defined a custom fonts scss file that import the mixins file and create custom definitions. Then on each scss page file import this dedicated fonts scss file.

:sweat_smile:

6

Another bizarre design decision from the Ionic team that goes against the principle of least astonishment. Anyone who has used SASS before would expect the mixins they write to be globally available in the remainder of the stylesheets. I’ve just spent 30 minutes trying to simply use a mixin only to find that that doesn’t work on Ionic 4 (although it did work in Ionic 3)

2 Likes
7

and there is no any Angular solution here? Can’t understand this change if it was working fine with v.3

8

i declare them separately in a own .scss file, but them i have to import them in in the scss Files, where i want to use them. I think this is the normal way since ionic 4

9

that’s what I found and what I’m doing but still not the best solution. Not sure if this is because Ionic or Angular. Do you know if happens the same using React/Vue with Ionic?