Webpackerを利用してBootstrapを導入してみた
はじめに
Bootstrapを導入する際、Webpackerを利用して導入してみたのでその方法をまとめときたいと思います。
以下の記事を参考にしています。
各種バージョン
ruby 2.7.0
Rails 6.0.3
bootstrap 4.5.2
jquery 3.5.1
popper.js 1.16.1
導入手順
yarnを使用してBootstrapをインストールする。
yarn add bootstrap jquery popper.js
#Bootstrap4のJSはjqueryとpopper.jsに依存しているので一緒にインストールします。
yarnとは？
npmより新しいパッケージマネージャ。
yarnはnpmのリポジトリからパッケージを取得する点は同じ。
違う点として、「yarn.lock」というファイルを自動生成する。
(bundlerのGemfile.lockのようなもの。)
BootstrapのJS部分をインクルードする
app/javascript/packs/application.jsに下記を追加する。
app/javascript/packs/application.js ・・・ import 'bootstrap'
application.jsは以下の既存のコードによって読み込まれます。
app/views/layouts/application.html.slim
doctype html
html
head
・・・
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
/ 上記は「app/javascript/packs/application.js」を読み込みます。
補足
jQueryをimportしてある記事も見かけるが、それは無意味です。
なぜなら、yarnを使用してjQueryをインストールしているので、
Bootstrapが自動でjQueryをrequireしてくれるからです。
Bootstrapのcss部分をインクルードする
２つのやり方を紹介します。また、scssを使用します。
webpackディレクトリ下で管理する方法
「app/javascript/src/application.scss」を作成します。
mkdir app/javascript/src && touch app/javascript/src/application.scss
作成したファイルに以下を追加します。
@import '~bootstrap/scss/bootstrap';
Webpackerは「app/javascript/packs」の中を参照するので、
「application.js」に以下の行を追加します。
app/javascript/packs/application.js ・・・ import '../src/application.scss
assetsディレクトリ下で管理する方法
既存のapplication.cssをscssに変更します。
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
「application.scss」内のコメントアウト部分を削除します。
削除後、下記の行を追加します。
@import 'bootstrap/scss/bootstrap';
