Cuộc sống Nhật Bản
Yuto Blog

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

Mua ngay trả dần cùng Muadee iOS
Nội dung chính

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

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

Bootstrap 5 と popperjs/coreを導入

Copy zsh
1
yarn add bootstrap @popperjs/core

BootstrapのCSSを導入

Copy app/assets/stylesheets/bootstrap.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/offcanvas";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

何かのモジュールだけを使いたくても、functionvariablesvariables-darkmixinsmapsが必要みたいです。
つまりあの五つはBootstrap5を使う時に必要な最小限です。

BootstrapのJSを導入

Copy app/assets/javascript/application.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import '../../assets/stylesheets/bootstrap.scss'

import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';
import 'bootstrap/js/dist/toast';
import 'bootstrap/js/dist/tooltip';

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

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

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

Copy zsh
1
yarn add sass -D
Updated at 2024-03-02
Nếu bài viết có ích thì các bạn hãy chia sẻ nhé
Rate this article: 4.9/5 (48 ratings)
You didn't rate yet
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.