4月, 2021 | srockstyle

Bootstrap、Railsで使う時にgemでいれたりいろいろあるけど、一つの入れ方としてWebpackを使うっていうのがある。

やり方を探そうとおもって調べていたけどQiitaとかだとなぜかみんなjQueryを入れてる記事がおおい。

Bootstrap先生は5からjQueryいらなくなったので、そのあたりを踏まえて入れ方を残して起きます。

インストール

yarnで。

$ yarn add bootstrap@next
$ yarn add @popperjs/core

設定

application.html.erbに以下を追加。

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

全体としてはこうなる。

<head>
  <title>アプリケーションなんとか</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>

次にapp/javascript/stylesheets/というディレクトリを作成、中にapplication.scssというファイルを作り以下を追加。

@import "bootstrap"

ここはポイントなのだけど、これを追記したからといってassetsの下のapplication.cssのファイルを削除したりしてはいけない。viewのspecが停止してしまう。

次はapp/javascript/packs/application.jsに以下を追加。

import "bootstrap"
import "../stylesheets/application"

あとは公式ドキュメントに倣ってモーダルとかのコードいれるとちゃんと表示される。

個人的にはReactとかフロントエンドフレームワークを使うべきだろうけど、でもそこまでじゃないんだけどjQueryつかいたくないみたいな状況の落とし所として普通にありなんじゃないかな。

Railsも6になったんだし、便利なところはちゃんとつかっていけたらいいと思う。

4月 2021

Rails6にbootstrap5を適用する

インストール

設定