🏖️

[Rails]BootStrap導入

2024/08/19に公開

Bootstrap

何回やってもカリキュラム見ないとできないのでまとめとこう🥺

RailsにBootstrapを導入する

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

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

1.CDNで導入する

CDNを使うと、外部のサーバーからBootstrapを読み込むため、手軽に導入できます。
app/views/layouts/application.html.erbにCDNのリンクを追加する

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>SelfSupportProject</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- 追記/BootstrapのCSSをCDNで読み込む -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- Turbolinksによるリロード対応のために元のスタイルシート設定を維持 -->
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>

    <!-- 追記/JavaScript (jQuery, Popper.js, Bootstrap JS) の読み込み -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <!-- Turbolinks対応のために元のJavaScript設定を維持 -->
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </body>
</html>

2.ファイルを配置して導入する

BootstrapのCSSとJavaScriptファイルをダウンロードしてプロジェクト内に配置する方法です。

3.yarnで導入する

対象アプリケーションのターミナル

yarn add jquery bootstrap@4.6.2 popper.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'
  })
)

app/javascriptの配下にstylesheetsフォルダを作成する

対象アプリケーションのターミナル

mkdir app/javascript/stylesheets

対象アプリケーションのターミナル

touch app/javascript/stylesheets/application.scss

app/javascript/stylesheets/application.scss

@use '~bootstrap/scss/bootstrap';

app/javascript/packs/application.js

:
:

import "channels"

<!--ここから-->
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"; 
<!--ここまで追記-->

Rails.start()
Turbolinks.start()
ActiveStorage.start()

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' %>

終了！！

補足

なんで最後にstylesheet_link_tagをstylesheet_pack_tagに書き換えたのか？？

もしcssは、app/assets 配下で管理、JavaScriptはapp/javascript 配下で管理したいといった場合には下記のように記述するとapp/assets、app/javascriptを参照するようになります。

app/views/layouts/application.html.erb

:
:

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

現場によって管理方法は様々だから知識として覚えておこう🫢

RailsにBootstrapを導入する

1.CDNで導入する

2.ファイルを配置して導入する

3.yarnで導入する

補足

Discussion