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.
Just wondering if anyone can point me in the right direction to get this working again…
Cheers
Paul
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);
}
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.
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
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 
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
So I’m not able to import them from the global.scss?
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…
ah right, thanks for the explanation
1 Like
let me know if it work out