Как использовать Bootstrap, BEM и React?

Question

[nakree]

Есть 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. Правильный ли такой подход? Какие есть альтернативы?

Comments

[sim3x]

Как подключаете бутстрап
Как выгляди дерево сасс файлов?

[nakree]

sim3x,

Вариант 1:

Подключаю бутстрап через import в sass, затем подключаю sass в компоненте.

Вариант 2:

Подключаю бутстрап сразу в компоненте:

[sim3x]

nakree, код следует вставлять текстом в тег code

Проблем с таким подключением не вижу

[nakree]

sim3x, подумал, что так будет наглядней + видно структуру.
Вот такая ошибка получается при втором варианте подключения:

Еще один скриншот

[alvvi]

nakree, все правильно, sass-файлы собранные Webpack-ом из разных модулей имеют разные контексты, @extend-ить не получится.
Единственный вариант сделать то что вы хотите - это все стили собирать отдельно от компонентов, недостатки такого подохода должны быть очевидны.

Answer 1

[Антон Спирин]

Можно использовать react-bootstrap.github.io

Как альтернатива, отказ от БЭМ и переход на css in js.
Сам в работе использую и рекомендую Styled Components

Comments

[nakree]

Интересно. А через сss in js можно использовать сss фреймворки, и удобно ли это?

[Антон Спирин]

nakree, судя по этому примеру , вполне удобно. Только на codesandbox подсветки синтаксиса и автодополнения для styled-components нет. Для IDE плагины есть.