It's not you, it's me: Bootstrap 4.3.1/RFS not generating media query at sub 1200px threshold

[megalofauna]

I've recently updated our project's Bootstrap version to the latest (4.3.1). I'm importing all of Bootstrap via node_modules. I haven't modified the RFS mixin in any way. I'm using the version that ships with Bootstrap 4.3.1 as configured by default. Bootstrap is compiling just fine with the exception of this particular RFS issue.

---

The media query is not being generated in my current environment. It is a large project with many dependencies and I'm pretty much shooting the dark trying to come up with a reduced test case. I realize that that makes helping me with this issue very difficult if not impossible. But I'm desperate at this point.

Also, I'm reasonably sure (say, 99%) this is a me problem, not an RFS problem, but I haven't been able to sort the issue.

I'm invoking the mixin as follows:

.my-test {
   @include rfs(3rem);
}

Note that this font size is greater than the minimum font size of 1.25rem at or below which no scaling will take place. So, that's not the issue.

I've also tried invoking the aliased versions of the mixin:

.my-test {
   @include responsive-font-size(3rem);
}

and

.my-test {
   @include font-size(3rem);
}

I've tried it with rem, px, and unitless values.

The mixin is definitely being recognized and is halfway working. I.e., it compiles out to regular CSS without a hitch.

So, the code above does indeed generate the following CSS:

.my-test {
  font-size: 3rem;
}

But, again, no media query (at 1200px) is being generated by the mixin in my current environment and, thus, no downward scaling is taking place below the 1200px threshold.

At screen widths below 1200px, I would expect to see something similar to the following:

@media (max-width: 1200px) {
  .my-test {
    font-size: calc(1.525rem + 3.3vw);
  }
}

But, no dice.

Again, I haven't modified the default configuration of the RFS mixin in any way, and it does appear to be halfway working, as it's compiling out to CSS.

Tried in my coworker's environment and he gets the same results. But, that's expected, as we have pretty similar local environments, I suppose.

I hate to clutter up your issues with something that's in all likelihood not an issue with RFS (which is awesome -- using it on other projects), but SO hasn't turned up any leads so far.

Any suggestions for how to debug?

Thanks.

[megalofauna]

https://github.com/twbs/rfs/issues/33#issuecomment-436277171

@yudyananda - did you figure out what changed that caused successful generation of the media query in your environment?

[yudyananda]

@megalofauna I'm not sure if I can help you because I don't use npm to compile scss or sass, but in my case I have to restart the localhost server. Can I see your repo?

[megalofauna]

Can I see your repo?

I wish. We're locked down tighter than an oil drum over here. Thanks, though!

[MartijnCuppens]

Hi @megalofauna,

You should enable RFS with $enable-responsive-font-sizes: true like explained in the docs (https://getbootstrap.com/docs/4.3/content/typography/#responsive-font-sizes):

RFS can be enabled by changing the $enable-responsive-font-sizes Sass variable to true and recompiling Bootstrap.

And in the release blog article (https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/#introducing-responsive-font-sizes):

Disabled by default, you can opt into this new behavior by toggling the $enable-responsive-font-sizes boolean variable.

Did you look over this or did we miss mentioning this anywhere else?

The reason we did this is because we want to "soft launch" RFS in v4 in case we need to tweak things for Bootstrap 5.

[megalofauna]

@MartijnCuppens Thank you!

No, you didn't overlook it at all. I just needed to RTFM.

The issue, for me, turns out to be quite simple and a little embarrassing. I was using a custom variables.scss file to override bootstrap and I didn't update that file when I updated Bootstrap. Thus. I didn't have the $enable-responsive-font-size boolean available to me in that file.

It was stuck in the off position as the updated Bootstrap source variables.scss file had that value set to false.

Closing with much appreciation!

[nimajnebp]

@include rfs($some-font-size)

where $some-font-size <= $rfs-base-font-size

it will also not get a fluid font size. You need to adjust your $rfs-base-font-size to have rfs() generate fluid font sizes.