bootstrap導入

初学者の備忘録

初学者の備忘録です。今回はbootstrap導入編

bootstrap説明

bootstrapとは・・・簡単に説明すると、レスポンシブデザインを基本とし、優れたデザインをス素早く実装するためのCSSフレームワークのことです。

Rails6のアプリケーションにBootstrapを導入するための方法は主に3パターンが考えられます。

1. CDNで導入する
2. ファイルを配置する
3. yarnでインストールする

今回は３のyarnでインストールするを備忘録として残していきます。

bootstrap導入

【１】インストール
作業ディレクトリまで移動してインストールします。
$ yarn add jquery bootstrap@4.6.2 popper.js

【２】　environment.jsを編集
次に、config/webpack/environment.jsを編集します。下記の記述を指定ファイルに追加してください。

config/webpack/environment.js

:
:

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

【３】　stylesheets追加
app/javascriptの配下にstylesheetsフォルダを作成します。
作成したapp/javascript/stylesheetsフォルダの配下にapplication.scssファイルを作成して、次のように記述します。

app/javascript/stylesheets/application.scss

@use '~bootstrap/scss/bootstrap';

【４】　application.jsを編集
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()

【５】　application.html.erbを編集
app/views/layouts/application.html.erbを書き換えます。

app/views/layouts/application.html.erb

:
:

- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

:
:

以上で導入終了です。お疲れ様でした。