Rails6.1 | 仕事売買アプリ作成 | 04 | Bootstrap5.3の利用 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【03 | アプリケーションの作成】 << 【ホーム】 >> 【05 | deviceの利用】

Bootstrap5.3を利用する準備をします。

Rails6.1では、通常のWebpackを利用する方法ではBootstrap4までしか対応していません。
そこでCDN経由でBootstrap５が動くように実装します。

その他、Bootstrapを動かすために必要なパッケージをYarnでインストールします。
必要なパッケージは「jquery」と「popper.js」です。

コマンド
yarn add jquery@3.6.0 popper.js@1.16.1

Bootstrap5.3を動かすには、別途「popperjs/core」が必要です。
これもyarnでインストールします。
yarn add @popperjs/core@2.11.8

WebpackでjQueryとPopperの設定をします。
「config\webpack\environment.js」ファイルに以下の記述を追加します。

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

記述追加　config\webpack\environment.js(6行目)

const { environment } = require('@rails/webpacker')

module.exports = environment

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

Bootstrap5.3を利用するため、CSSとJSをCDN経由でインクルードする記述を追加します。

記述変更　app/views/layouts/application.erb.html（9行目~14行目）

    <!-- bootstrap5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

app/views/layouts/application.erb.html

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

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

    <!-- bootstrap5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>    

  </head>

  <body>
    <%= yield %>
  </body>
</html>