# Ionic4 scss mixin function not working **URL:** \ **Category:** Ionic Framework\ **Created:** [November 10, 2018, 4:54am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189 "2018-11-10T04:54:55Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Silverbugnz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverbugnz/32/113737_2.png) [@Silverbugnz](https://forum.ionicframework.com/u/Silverbugnz)\ **Post date:** [November 10, 2018, 4:54am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/1 "2018-11-10T04:54:55Z")
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) ```auto $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](https://global.discourse-cdn.com/ionicframework/original/3X/8/a/8a3bd3c64766917d0372461e4fdde06e88a13993.png) Just wondering if anyone can point me in the right direction to get this working again… Cheers Paul ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 10, 2018, 7:25am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/2 "2018-11-10T07:25:12Z")
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: ```auto $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); } ``` ---
**Author:** ![Silverbugnz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverbugnz/32/113737_2.png) [@Silverbugnz](https://forum.ionicframework.com/u/Silverbugnz)\ **Post date:** [November 12, 2018, 1:39am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/3 "2018-11-12T01:39:47Z")
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. ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 12, 2018, 5:33am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/4 "2018-11-12T05:33:46Z")
Just tested, your function works fine in a `
` in Ionic v4 too Like I said above double check your import in case your function is in a separate file ---
**Author:** ![Silverbugnz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverbugnz/32/113737_2.png) [@Silverbugnz](https://forum.ionicframework.com/u/Silverbugnz)\ **Post date:** [November 12, 2018, 5:54am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/5 "2018-11-12T05:54:40Z")
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 🙂 ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 12, 2018, 6:06am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/6 "2018-11-12T06:06:34Z")
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 ---
**Author:** ![Silverbugnz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverbugnz/32/113737_2.png) [@Silverbugnz](https://forum.ionicframework.com/u/Silverbugnz)\ **Post date:** [November 12, 2018, 6:20am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/7 "2018-11-12T06:20:13Z")
So I’m not able to import them from the global.scss? ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 12, 2018, 6:35am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/8 "2018-11-12T06:35:10Z")
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… ---
**Author:** ![Silverbugnz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverbugnz/32/113737_2.png) [@Silverbugnz](https://forum.ionicframework.com/u/Silverbugnz)\ **Post date:** [November 12, 2018, 6:36am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/9 "2018-11-12T06:36:08Z")
ah right, thanks for the explanation ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 12, 2018, 6:37am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/10 "2018-11-12T06:37:30Z")
let me know if it work out ---
**Author:** ![Silverbugnz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/silverbugnz/32/113737_2.png) [@Silverbugnz](https://forum.ionicframework.com/u/Silverbugnz)\ **Post date:** [November 12, 2018, 6:38am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/11 "2018-11-12T06:38:52Z")
Yep, looks like it has ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 12, 2018, 6:49am UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/12 "2018-11-12T06:49:20Z")
Cool 🙂 have fun ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 9:09pm UTC](https://forum.ionicframework.com/t/ionic4-scss-mixin-function-not-working/147189/13 "2021-07-19T21:09:50Z")
Closed on July 19, 2021, 9:09pm UTC