Добавьте новые утилиты с Bootstrap 5

Следуя новой документации B5, вы должны добавлять новые утилиты с новым API утилит. Однако я не получил нового результата.

пример:

@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor
      responsive: true,
      values: auto pointer grab,
    )
  )
);

мой файл:

@import "bootstrap.scss";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);
  • Мне нужно импортировать bootstrap.scss, потому что в противном случае $ utilities не определен
  • цель состоит в том, чтобы добавить новое свойство, чтобы сделать кнопку округлой. простой пример для тестирования нового API. не работает хотя
  • Я использую https://github.com/twbs/bootstrap-npm-starter для компиляции файлов scss: src - это starter.scss, а вывод - starter.css

Я не могу найти новое свойство с закругленными кнопками


sass bootstrap-5 utilities
person user9958772    schedule 20.12.2020    source источник

Ответы (3)


arrow_upward
4
arrow_downward

При настройке Bootstrap SASS, @import "bootstrap" должен идти после изменений. Кроме того, для файла утилит требуется файл переменных, а для файла переменных требуется файл функций, поэтому вы должны импортировать все 3 перед изменением ...

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

@import "bootstrap";

Демо

Поскольку Bootstrap 5 в настоящее время находится в стадии бета-тестирования, я отправил отчет о проблеме по этому поводу.

person Zim    schedule 20.12.2020
comment
спасибо zim за ответ! Я заставил его работать. - person user9958772; 22.12.2020
comment
Я только что на собственном горьком опыте понял, что после этого должен быть основной импорт начальной загрузки. Было бы неплохо, если бы это упоминалось в документации. И поскольку они используют @import вместо @use, мы в основном импортируем эти 3 файла functions, variables и utilities дважды, так как основной @import "bootstrap" также импортирует эти 3 файла, что излишне увеличивает размер CSS. Так они и планировали использовать API утилит? Per SASS Каждая таблица стилей выполняется, а ее CSS генерируется каждый раз, когда используется @imported, что увеличивает время компиляции и дает раздутый вывод. - person RcoderNY; 05.05.2021

arrow_upward
0
arrow_downward

Для Bootstrap 5.0.1 это было бы более подходящим:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

Импорт начальной загрузки в конце больше не требуется.

person LordHits    schedule 25.05.2021

arrow_upward
0
arrow_downward

Bootstrap 5.0.1, как-то не повезло с map-merge($utilities ...)

но у bootstrap есть еще одна точка расширения: переопределение каждого значения по умолчанию $ var

следующие будут объединены внутри @import '~bootstrap/scss/utilities';

$utilities: (
  'event-type': (
    property: background-color,
    class: 'event-type', // <- somehow this required
    values: (
      commit: #BADA55,
      issue: #C0FFEE,
    ),
  ),
);

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/utilities/api';

person grigson    schedule 06.06.2021