今回はbootstrap導入方法からその後のcssの読み込み方法に関して説明します！
bootstrap導入
既に導入済みの方は飛ばしてください。
1. yarnでインストールする
$ yarn add jquery bootstrap@4.6.2 popper.js
2. config/webpack/enviroment.jsを編集
congfig/webpack/environment.js
:
:
///以下すべて追加してください
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
3. app/javascriptの配下にstylesheetフォルダを作成
作成したフォルダの配下にapplication.scssを作成し、記述します。
app/javascript/stylesheets/application.scss
@use '~bootstrap/scss/bootstrap';
4. app/javascript/packs/application.jsを編集
app/javascript/packs/application.js
:
:
import "channels"
/// ここから
import "jquery"
import "popper.js"
import "bootstrap"
import "../stylesheets/application"
/// ここまで追加
Rails.start()
Turbolinks.start()
ActiveStorage.start()
5. app/views/layouts/application.html.erbを書き換え
元々あった<head>タグ内の<%= stylesheet_link_tag~の記述を<%= stylesheet_pack_tag~に書き換えます。
（もともと書いていなければ追記をお願いします。)
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
ここでbootstrapの導入は終わりです。
アプリにCSSを読み込ませる
bootstrap導入のためにapplication.html.erbを書き換えた状況ですと、app/asset/stylesheet配下のscssファイルは読み込まれません。
なぜなら先ほどstylesheet_pack_tagに書き換えたことで参照先のフォルダがapp/javascript/stylesheetに変わったため、既存のcssは参照できていない状況になっています。また、packs/application.jsファイルにもcssファイルを参照するための追記が必要になります。そのため、以下の手順を行ってください。
1. app/javascript/stylesheets/application.scssにcssの記述を書く
application.scssと書きましたが、app/javascript/stylesheets配下にscssファイル作成して好きなファイル名にしても大丈夫です。(xxxx.css or XXXX.scssとなっていればOK！)
2. app/javascript/packs/application.jsに追記をする
ここで先ほどのapplication.scssもしくは独自に作成したcss,scssファイルを読み込ませます。
app/javascript/packs/application.js
import '../stylesheets/xxxx.css' /// xxxx.cssは先ほどの読み込ませたいcssファイル名に変更してください
これで完了です！お疲れ様でした！