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

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

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

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

Bootstrap5.3を動かすために必要なパッケージをimportmap(インポートマップ)でインストールします。

コマンド
bin/importmap pin bootstrap

これによりimportmapにbootstrapと@popperjs/coreが追加されます。

~/Desktop/Rails7_1/VacationRental7 $ bin/importmap pin bootstrap

Pinning "bootstrap" to https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js
Pinning "@popperjs/core" to https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js

「config/importmap.rb」ファイルを見ると、8行目と9行目に記述が追加されているのが分かります。

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"

「app/javascript/application.js」ファイルに以下の記述を追加します。

import 'bootstrap';
import "popper"

記述追加　【app/javascript/application.js】4, 5行目

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import 'bootstrap';
import "popper"

Gemfileに以下の記述を追加します。

# bootstrap5
gem 'bootstrap', '~> 5.3', '>= 5.3.2'
gem 'sassc-rails', '~> 2.1', '>= 2.1.2'

バンドルインストールします。
コマンド
bundle

「app/assets/stylesheets」フォルダにある「application.css」ファイルを「application.scss」にリネームします。
拡張子をscssにしています。

リネームした「app/assets/stylesheets/application.scss」ファイルに以下の記述を追加します。

 @import "bootstrap";

記述追加　【app/assets/stylesheets/application.scss】17行目

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import "bootstrap";