Question

我最近将项目的Bootstrap版本更新为最新版本（4.3.1）。该版本的新功能之一是RFS（https://github.com/twbs/rfs）。我正在通过node_modules导入所有Bootstrap。我没有以任何方式修改RFS mixin。我使用默认配置的Bootstrap 4.3.1附带的版本。除此特定的RFS问题外，Bootstrap的编译都很好。

RFS旨在生成媒体查询（默认为1200px），如果低于该阈值，则字体会自动缩小。

该媒体查询不是在我当前的环境中生成的。这是一个具有许多依赖项的大型项目，我几乎全都在暗中尝试以减少测试用例。我意识到，即使不是不可能，这也很难帮助我解决这个问题。但是我现在很绝望。

此外，我有把握地确定（例如90％）这是一个 me 问题，而不是RFS问题，但是我无法对此问题进行解决。

我正在按如下方式调用mixin：

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

请注意，此字体大小大于或等于1.25rem的最小字体大小，在该大小以下，不会进行缩放。所以，这不是问题。

我还尝试了调用mixin的别名版本：

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

和

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

我已经尝试过使用rem，px和无单位值。

mixin无疑已得到认可，并且 halfway 正在运行。也就是说，它可以毫无问题地编译为常规CSS。

因此，以上代码确实生成了以下CSS：

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

但是，再一次，在我当前的环境中，mixin不会生成任何媒体查询（在1200px处，因此，在1200px阈值以下不会发生向下缩放。

在1200px以下的屏幕宽度下，我希望看到类似以下内容的东西：

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

但是，没有骰子。

同样，我还没有以任何方式修改RFS mixin的默认配置，并且似乎在编译到CSS时显示为一半。

在我同事的环境中尝试过，他得到了相同的结果。但是，这是意料之中的，因为我想我们拥有非常相似的本地环境。

有人可以指出我的方向来尝试对此进行排序吗？

Answer 1

解决方案：

tl; dr-RTFM

扩展解决方案：

在更新Bootstrap之后，我没有更新自定义variables文件。源variables文件的$enable-responsive-font-size布尔值设置为false，而我的未更新自定义variables文件中没有它。因此，我没有用false覆盖true的值。

smh。

引导程序（4.3.1）的RFS（响应字体大小）未在1200px阈值下生成媒体查询

1 个答案: