Я создаю приложение реагирования, созданное с помощью команды create-Reaction-app, используя bootstrap и Reaction-bootstrap
У меня есть пользовательская тема, которая представляет собой пакет npm и на самом деле просто определяет некоторые переменные.
@myorg/theme/lib/scss/_variables.scss:
$theme-colors: (
primary: #FFFF,
// etc...
)
Затем я импортирую это в мою тему "site" перед импортом начальной загрузки:
/ SRC / index.scss:.
@import "~@myorg/theme/lib/scss/_variables.scss";
@import '~bootstrap/scss/bootstrap.scss';
Теперь я хотел бы иметь компоненты со своими специфическими стилями, основанными на начальной загрузке:
/ SRC / компоненты / MainLayout.scss:.
@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
#sidebar {
border-right: 1px solid $gray-400
}
Однако, когда я делаю это, он избавляется от цветов моей темы, поэтому я должен сделать это -
/ SRC / компоненты / MainLayout.scss:.
@import "../../index.scss";
#sidebar {
border-right: 1px solid $gray-400
}
Это правильный способ сделать это? Кажется, что каждый раз, когда я делаю это, я записываю в документ все содержимое (bootstrap и все), и я буду делать это много для многих компонентов. Например, у меня есть другой компонент, в котором я хотел бы настроить CardColumns (на самом деле я не могу заставить это работать независимо от импорта):
//@import ???? I need, functions, mixins, and variables from bootstrap
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 10;
}
@include media-breakpoint-only(xl) {
column-count: 10;
}
}
Как правильно использовать scss-файлы начальной загрузки 4 в модульных компонентах реакции? Без раздувания размер загрузки.