Yuto Blog

Yuto Blog

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

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だけ使いたくても、functionvariablesmixinsが必要みたいです。
つまりあの三つは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
Created by Yuto at 2022-06-12 00:43
0
Like this article
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.