はじめに
Railsアプリ開発の際、フロントエンドのコーディング時にBootStrapというフレームワークを利用し、CSSやJavaScriptのコーディングが簡略化する事ができます。そのBootstrapの導入方法についてまとめます。
方法1
※tarminalのディレクトリの位置はアプリ内に位置する様にcdコマンドで予め移動させてください。
1. Bootstrapを導入
.terminal
% yarn add bootstrap@next
コマンド実行後、バージョンを設定する画面が表示されます。ベータ版は不具合が生じる可能性がある為、注意が必要です。
2. popper.jsを導入
.terminal
% yarn add @popperjs/core
3. app/javascript/packs/application.js を読み込む
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
4. ディレクトリを作成
- app/javascript/stylesheetsを作成
- stylesheetsディレクトリの直下にapplication.scssファイルを作成
5. bootstrapを読み込む
app/javascript/stylesheets/application.scss
@import "bootstrap"
6. bootstrapとapplication.scssを読み込む
app/javascript/packs/application.js
+ import "bootstrap"
+ import "../stylesheets/application"
方法2
1.Gemにbootstrapをインポート
.Gemfile
+ gem 'bootstrap-sass', '~> 3.3.6'
+ gem 'sass-rails', '>= 3.2'
.terminal
% bundle install
2.app/assets/stylesheets/application.scssのファイル名を変える
- application.cssファイルの拡張子を「.css」から「.scss」に変える
app/assets/stylesheets/application.scss
+ @import "bootstrap-sprockets";
+ @import "bootstrap";
# Gemを使う場合は以下のコードを削除
*= require_self
*= require_tree
3. JavaScriptを読み込み
app/assets/javascripts/application.js
+ //= require jquery
+ //= require bootstrap-sprockets