🐙

HTML/CSS｜Bootstraopの導入

2023/08/17に公開

Bootstrap

手順

1️⃣ ターミナルで以下のコマンドを実行

$ yarn add jquery bootstrap@4.6.2 popper.js

2️⃣ config/webpack/environment.js に以下のコードを追記。

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の配下にstylesheetsフォルダを作成

4️⃣ 作成したapp/javascript/stylesheetsフォルダの配下にapplication.scssファイルを作成、また、作成したファイルに下記のように記述

application.scss

@use '~bootstrap/scss/bootstrap';

5️⃣ jQueryの導入

app/javascript/packs/application.js に下記のコードを追記

application.js

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application";

jQueryが読み込まれない場合、以下コマンドを実行する。（railsバージョンが6の場合、こちらを推奨します！！）

$ yarn add jquery

6️⃣ app/views/layouts/application.html.erbを書き換え
<変更前>

application.html.erb

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

<変更後>

application.html.erb

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

手順

Discussion