Как сослаться на переменную bootstrap scss с помощью @use?
У меня есть простая таблица стилей для компонента на моем сайте, и я пытаюсь использовать переменную $zindex-fixed, но у моего подхода есть проблемы. Любая помощь будет оценена по достоинству!
Моя таблица стилей выглядит так:
@use "~bootstrap/scss/variables";
.playerBar {
position: fixed;
left: 0px;
bottom: 0px;
height: 90px;
min-width: 620px;
width: 100%;
z-index: variables.$zindex-fixed;
background: #1e1e1e;
}
Я получаю следующую ошибку:
SassError: Undefined mixin.
╷
307 │ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_variables.scss 307:1 @use
Это использует Bootstrap 5.0.0-beta1 с sass 1.30.0. Пожалуйста, дайте мне знать, если я могу предоставить больше информации, чтобы помочь в диагностике!
Да, версия 1.30
Ответы 1
В настоящее время нет планов поддерживать модульную систему sass в Bootstrap v5. На данный момент решение состоит в том, чтобы использовать @import вместо @use:
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.playerBar {
position: fixed;
left: 0px;
bottom: 0px;
height: 90px;
min-width: 620px;
width: 100%;
z-index: $zindex-fixed;
background: #1e1e1e;
}
В основном это отказ от ответственности от команды sass, препятствующей использованию правила @import: sass-lang.com/documentation/at-rules/import
Правильно, потому что они сворачивают его.
Я могу быть плохим в этом, но всякий раз, когда я использую (at) import с бутстрапом, я получаю причудливую новую копию его css в своем выводе в веб-пакете. Чем больше импорта, тем больше копий. (at)use - единственный способ, который я нашел вокруг этого.
Команда sass создала инструмент для переноса версии @import в версию @use. В качестве примера они используют Bootstrap :) sass-lang.com/documentation/cli/migrator
Вы используете Dart Sass?