BEM記法でBootstrapを導入しようとして諦めた件

やりたこと（やりたかったこと）

BEM記法を踏襲しつつ、Bootstrap導入したい。（したかった。）

こちらにも記載されている通り、BootstrapなどのCSSフレームワークは文章構造とスタイル情報の分離ができない。
なんとかBootstrapを使いつつ文章構造とスタイルの分離ができないか検討する。

結論

できなくはないが、Bootstrapの気軽に導入できるメリットがなくなってしまうので諦めた。
詳細は以下の手順を参照。

目的にもよるが、現在の自分はスピード感を持ってプロトタイプを作成するフェーズなので、スタイル情報がHTMLに含まれてしまうことを許容し、Bootstrapを利用することとした。

環境

• node-sass4.14.1
• bootstrap4.5.2

作業手順

前提

以下の手順でSass環境は構築されている前提
https://qiita.com/learn_tech1/items/348e78f9ba5efbabf603

yarnでbootstrapを追加

yarn add bootstrapでBootstrapを追加する。
package.jsonに追加される。

package.json

  "dependencies": {
    "bootstrap": "^4.5.2",
  }

style.sassでBootstrapをimportする。

resources/scss/style.scss

@import "../../node_modules/bootstrap/scss/bootstrap";

sassに@extendでbootstrapを参照

上記まで完了すれば、以下のように@extendでBootstapのクラスを継承できる。（内容は適当）
ボタン程度であればこれぐらいで済むが、グリッドとかをやり出したらめちゃくちゃなことになりそうなので諦める。

.button-area {
    &__back-button {
        @extend .btn;
        @extend .btn-secondary;
        margin: auto;
    }

    &__next-button {
        @extend .btn;
        @extend .btn-primary;
        margin: auto;
    }

}

参照