Bootstrapはかなり有名で便利ですね。早くアプリケーションが使えるようにするためよく使う場合が多いと思います。
しかし、いつも全てのBootstrapの機能が必要ではない場合もあります。その時に一部の機能だけ導入すればいいです。
今回はViteを使っているRails 7アプリにBootstrap 5を導入してみました。
Bootstrap 5 と popperjs/coreを導入
yarn add bootstrap @popperjs/core
BootstrapのCSSを導入
app/assets/stylesheets/bootstrap.scss
@import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/dropdown';
例えdropdown
だけ使いたくても、function
、variables
、mixins
が必要みたいです。
つまりあの三つはBootstrap5を使う時に必要な最小限です。
BootstrapのJSを導入
app/assets/javascript/application.js
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
を追加すれば解決できます。
yarn add sass -D