Bootstrap，BEM和React组件

Question

使用具有许多组件的react应用程序，每个组件都有自己的scss文件。

list.jsx
list.scss
module.jsx
module.scss

我想使用Bootstrap（因为我不想重写下拉列表和模态）。 我还希望能够覆盖Bootstrap变量，因此sass的设置如下：

my-variables.scss
variables.scss
bootstrap.scss

这很有效，直到你到达BEM。该项目使用BEM而不是引导类：

<ul class="list-group">
    <li class="list-group-item">one</li>
    <li class="list-group-item">two</li>
</ul>

我们有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...
}

我不想编写自己的属性，而是希望扩展Bootstrap，所以我可以说：

.cars-list {
    @extend .list-group;

    &__car {
    @extend .list-group-item;
}

我的问题是：

• 我可以将我的sass堆栈包含到组件.scss中，这样我就可以扩展bootstrap类了但是我将在给定视图中复制所有bootstrap times-the-number组件。

• 这是否适用于如何编写引导选择器？