Viteを使っているRailsアプリに一部のBootstrap 5を導入方法

Bootstrapはかなり有名で便利ですね。早くアプリケーションが使えるようにするためよく使う場合が多いと思います。
しかし、いつも全てのBootstrapの機能が必要ではない場合もあります。その時に一部の機能だけ導入すればいいです。

今回はViteを使っているRails 7アプリにBootstrap 5を導入してみました。

Bootstrap 5 と popperjs/coreを導入

1
yarn add bootstrap @popperjs/core

1
2
3
4
5
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

@import 'bootstrap/scss/dropdown';

例えdropdownだけ使いたくても、function、variables、mixinsが必要みたいです。
つまりあの三つはBootstrap5を使う時に必要な最小限です。

BootstrapのJSを導入

1
2
import '../../assets/stylesheets/bootstrap.scss'
import 'bootstrap/js/dist/dropdown'

ここは先ほど作成したbootstrap.scssファイルをインポートして、それから必要な機能のJSファイルをインポートします。

[plugin:vite:css] Preprocessor dependency sass not found. Did you install it? というエラーが発生した場合

sassを追加すれば解決できます。

1
yarn add sass -D