Добавьте новые утилиты с 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 не определено
- цель состоит в том, чтобы добавить новое свойство, чтобы сделать пример кнопки rounded.simple для тестирования нового API. хотя не работает
- Я использую https://github.com/twbs/bootstrap-npm-starter для компиляции файлов scss: src — это starter.scss, а вывод — starter.css.
Я не могу найти новое свойство button-rounded
Ответы 5
При настройке 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 в настоящее время является бета-версией, я отправил отчет о проблеме для этого.
Я задавался вопросом о том же. Все ответы, которые я могу найти, говорят, что импортировать начальную загрузку после, но, как вы сказали, нет необходимости повторно импортировать все снова.
Вот как работает SASS... это не бутстрап
Начиная с 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,
),
),
)
);Импортировать «бутстрап» в конце больше не требуется.
Bootstrap 5.0.1, как-то не повезло с map-merge($utilities ...)
но у начальной загрузки есть еще одна точка расширения: переопределение каждого значения по умолчанию $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';Это единственное, что я нашел, что работает без повторного импорта всего бутстрапа, спасибо!
Для бутстрапа 5.1.3 из документации
Не забывайте @import "bootstrap/scss/maps";, так как это нужно коммунальным службам.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
@import "bootstrap/scss/utilities/api";
Начиная с Bootstrap 5.2. update вам нужно действовать немного иначе. Добавлен новый файл maps.
Если вы работаете со SCSS и хотите изменить цвета, вам следует добавить карты в файл SCSS.
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2
а потом:
$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
и наконец:
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";
и остальное.
Как добавить цвет текста, не добавляя его в themecolors?
Я только что сам обнаружил это на собственном горьком опыте, после которого должен произойти основной импорт начальной загрузки. Было бы неплохо, если бы в документах это упоминалось. И поскольку они используют
@importвместо@use, мы в основном импортируем эти 3 файлаfunctions,variablesиutilitiesдважды, потому что основной@import "bootstrap"также импортирует эти 3 файла, что излишне увеличивает размер css. Это то, как они планировали использовать API утилит? Согласно SASS «Каждая таблица стилей выполняется, и ее CSS генерируется каждый раз, когда она @импортируется, что увеличивает время компиляции и приводит к раздутому выводу»