Bootstrap.cssを特定の領域内部のみに適用し、その中にReactのコンポーネントを描画する方法(postCSSを利用)

はじめに

既存のWebサイトにReactのコンポーネント(react bootstrap)を描画しようとしたところ、bootstrap.cssを読み込む必要があり画面全体のレイアウトが崩れてしまいました

そこで、Bootstrapのスタイルを特定の領域に限定するために、ルート要素にカスタムクラス（例: .bootstrap-scope）を追加し、スタイルをそのクラスの内部に限定するようにbootstrap.css自体を変更します

具体的には、postcss-prefixwrapを利用して、全てのセレクタの前に.bootstrap-scopeを追加するように設定します

bootstrapがclass="bootstrap-scope"の内部にだけ、適用されるようになります

<div class="bootstrap-scope">
  <!-- Bootstrapのスタイルが適用される領域 -->
  <button class="btn btn-primary">Bootstrap Button</button>
</div>

node.js環境であればpostCSSでcssファイルを変更可能ですが、今回はvite環境で設定します

1. postCSSのインストール

bootstrapとpostcss関連をインストールします

$ npm install bootstrap postcss postcss-prefixwrap

2. postcssの設定をvite.config.tsに追加する

通常はpostcss.config.jsに設定して、vite.config.tsでimportしますが、モジュール型の読み込み制限など問題が発生しやすいので、viteの設定ファイルに直接追記します

vite.config.ts

export default defineConfig({
  css: {
    postcss: {
        plugins: [
          // cssのセレクタの前に追加する(class="bootstrap-scope"配下のみbootstrapを適用させる)
          prefixWrap('.bootstrap-scope', { 
            whitelist: ['.*\\.css'] // 全てのcssを対象とする
          })
        ]
    }
  },
})

3. 変換を行うためbootstrapをcssファイル内でimportします

scoped-bootstrap.css

@import "bootstrap/dist/css/bootstrap.min.css";

4. テスト用コンポーネントを作成して動作確認を行います

変換後のbootstrap(scoped-bootstrap.css)を読み込みます

App.tsx

import './scoped-bootstrap.css';

const App = () => {
  return (
    <div>
      <div className="bootstrap-scope">
        <button className="btn btn-primary">Bootstrap Button</button>
        <div className="alert alert-success">Scoped Alert</div>
      </div>
      <div>
        <button className="btn btn-primary">Outside of Bootstrap Scope Button</button>
      </div>
    </div>
  );
};

export default App;

bootstrap-scopeが指定されたタグ配下のみ、bootstrapが適用されていることが確認できました