Bootstrap 5 dropdown だけを使用する（Visual Studio + npm）

はじめに

プロジェクトで各画面要素のコンポーネントは既に用意されていたが、ドロップダウンリストだけがなかった。

• Bootstrap の dropdown だけを使用したい
• Bootstrap の他のコンポーネントは使用したくない
• Bootstrap のバージョンは 5.3

Bootstrap のインストール

// プロジェクトのルートフォルダで実行
npm install bootstrap

プロジェクトフォルダ/node_modules/bootstrap フォルダに Bootstrap の各 scss ファイルがダウンロードされる。
（Visual Studio の場合、node_modules フォルダは非表示になっているので、エクスプローラーで確認）

SCSSで基本機能とドロップダウンのスタイルをインポート

scss ファイルを作成する（例：src/styles/bootstrap.scss）

// src/styles/bootstrap.scss
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";

@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/dropdown";

• 先頭の４ファイルはコンパイルを通すために必要。
• root
  root は以下の依存関係があるため、root をインポートしないとドロップダウンのリスト部分の背景色が透明になってしまう。 他にも依存関係はあるかもしれないが、背景色の問題だけなのであれば、root を外しても問題ないはず。
  （独自のスタイルで背景色を設定すればよい）

// _root.scss
--#{$prefix}body-color: #{$body-color}; // --bs-body-color

// _variables.scss 
$dropdown-color: var(--#{$prefix}body-color);

// _dropdown.scss
--#{$prefix}dropdown-color: #{$dropdown-color}; //  var(--bs-body-color);

• buttons
  buttons は ドロップダウンの開閉用ボタンに btn-* 系のスタイルを使用しているため、独自のスタイルを指定しないのであればインポートが必要。

dropdown.js の参照

プロジェクトフォルダ/node_modules/bootstrap/js/dist/dropdown.js というドロップダウン用のファイルがあるが、このファイル単体では動作しない。 依存関係がめんどくさいので、 プロジェクトフォルダ/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js で妥協する。

import が使用できるのであれば、以下のみでよい。（html に script 参照するタグを書く必要はない）

// main.tsx
import 'bootstrap/js/dist/dropdown.js'