【rails】bootstrapを導入した際にcssを読み込ませる方法！ #Rails

今回は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ファイル名に変更してください

これで完了です！お疲れ様でした！