Styjun

I've recently updated our project's Bootstrap version to the latest (4.3.1). One of the new features in that version is RFS (https://github.com/twbs/rfs). 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.

RFS is designed to generate a media query (default is 1200px) below which threshold the font automatically scales downward in size.

That 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, 90%) 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.

Can someone point me in a direction to try to sort this?

Solution:

tl;dr - RTFM

Expanded solution:

I didn't update my custom variables file after updating Bootstrap. The source variables file had the $enable-responsive-font-size boolean set to false and I didn't have it in my un-updated custom variables file. Thus, I didn't override the false value with true.

smh.