Ionic4 scss mixin function not working


#1

Hey All,

I’m just in the process of upgrading my app to V4 and I’ve noticed that one of my mixin functions is no longer working.

The function below takes a px size parameter and outputs the correct rem equivalent. It would normally be called like this:

font-size: rem(24px);

(the functions below)

$browser-context: 16;

@function rem($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1rem;
}

The problem is that the rem(24px) is not being replaced when the page is rendered.

27%20PM

Just wondering if anyone can point me in the right direction to get this working again…

Cheers

Paul


#2

It seems that your function works fine on html elements, I tried with a p just worked well

On which element are you trying to set the font-size: rem(24px); ?

The function’s reference (import) does exist in the scss file where you are trying to use the function?

P.S.: I tried the following which worked fine in a dummy project:

$browser-context: 16;

@function rem($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1rem;
}

p {
   font-size:  rem(24px);
   height: rem(24px);
}

#3

Hey, thanks for the quick reply.

In the instance above it’s on a Div element. It also use to work when the app was in V3, but since the upgrade it’s stopped working.


#4

Just tested, your function works fine in a <div/> in Ionic v4 too

Like I said above double check your import in case your function is in a separate file


#5

Ah right, just put the function directly into my page scss and it’s working. Must be the includes (or lack of somewhere). Thanks for the help :slight_smile:


#6

In v3 you probably imported your scripts just once. In v4 you should probably add the import in every file where you use your functions

Interesting that it didn’t throw an error a build time


#7

So I’m not able to import them from the global.scss?


#8

Exactly. In v4 each component scss is related to its component.

In v3 all css were collected and bundled in a single huge css file, therefore you were able to import only once

In v4, each component has its own css + there is still a global css too. This has for result that there isn’t a huge file to load at boot time but because there are splitted, independent and therefore only load when the component is effectively use, that’s why you have to include your external function in each component where you use it

My understanding at least…


#9

ah right, thanks for the explanation


#10

let me know if it work out


#11

Yep, looks like it has


#12

Cool :slight_smile: have fun