Есть React приложение, в котором есть много компонентов, каждый компонент имеет свой scss-файл:
list.js
list.scss
module.js
module.scss
Я хочу использовать Bootstrap (сетку и некоторое оформление), и это все работает хорошо, пока не начинаешь использовать BEM:
<ul class="cars-list">
<li class="cars-list__car">one</li>
<li class="cars-list__car">two</li>
</ul>
В scss-файле этого компонента мы имеем:
.cars-list {
properties...
&__car {
properties...
}
Вместо того, чтобы писать свои css-свойства, я бы хотел
унаследовать их у Bootstrap, и, допустим дописать свои:
.cars-list {
@extend .list-group;
&__car {
@extend .list-group-item;
color: gray;
}
Но, при попытке унаследовать, при компиляции получаю ошибку, мол не может найти такой класс (от бутстрапа). Думаю дело в области видимости и в неправильном импорте scss-файлов.
P.S. Bootstrap ставлю через npm.
Пробовал по разному подключать бутстрап и в компоненте, и в scss файлах. Выглядело костыльно, но сработало, только бутстрап классы назначались по 2 раза.
Вопросы такие:
1. Как правильно это все реализовать?
2. Правильный ли такой подход? Какие есть альтернативы?
Средний
Простой
