Блог

Недавно я обновил версию начальной загрузки нашего проекта до последней (4.3.1). Одной из новых функций в этой версии является RFS (https://github.com/twbs/rfs ). Я импортирую весь Bootstrap через node_modules. Я никоим образом не изменял RFS-микс. Я использую версию, которая поставляется с Bootstrap 4.3.1, настроенную по умолчанию. Bootstrap компилируется просто отлично, за исключением этой конкретной проблемы с RFS.

RFS предназначена для генерации медиа-запроса (по умолчанию — 1200px ), ниже которого пороговое значение шрифта автоматически уменьшается в размере.

Этот медиа-запрос не генерируется в моей текущей среде. Это большой проект со многими зависимостями, и я в значительной степени теряюсь в догадках, пытаясь придумать сокращенный тестовый пример. Я понимаю, что это делает помощь мне в решении этой проблемы очень сложной, если не невозможной. Но на данный момент я в отчаянии.

Кроме того, я достаточно уверен (скажем, на 90%), что это проблема меня, а не RFS, но я не смог разобраться с проблемой.

Я вызываю смешивание следующим образом:

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

Обратите внимание, что этот размер шрифта больше минимального размера шрифта 1.25rem или ниже, при котором масштабирование происходить не будет. Итак, проблема не в этом.

Я также пытался вызвать псевдонимные версии микширования:

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

и

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

Я пробовал это со значениями rem , px и без единиц.

Микширование определенно распознается и работает наполовину. Т.е. оно без проблем компилируется в обычный CSS.

Итак, приведенный выше код действительно генерирует следующий CSS:

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

Но, опять же, в моей текущей среде mixin не генерирует медиа-запрос (at 1200px ), и, таким образом, масштабирование в сторону уменьшения не происходит ниже порогового значения 1200 пикселей.

При ширине экрана ниже 1200px я ожидал бы увидеть что-то похожее на следующее:

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

Но нет кубиков.

Опять же, я никоим образом не изменял конфигурацию RFS mixin по умолчанию, и она, похоже, работает наполовину, поскольку она компилируется в CSS.

Попробовал в среде моего коллеги, и он получает те же результаты. Но, я полагаю, это ожидаемо, поскольку у нас довольно похожие локальные среды.

Может кто-нибудь указать мне направление, чтобы попытаться отсортировать это?

Решение:

tl; dr — RTFM

Расширенное решение:

Я не обновлял свой пользовательский variables файл после обновления Bootstrap. В исходном variables файле для $enable-responsive-font-size логического значения было установлено значение false, и у меня его не было в моем не обновленном пользовательском variables файле. Таким образом, я не переопределял false значение с помощью true .

smh.