【図解あり】Rails6でBootstrapを導入してトップページを作成する

11171 ワード
Rails Rails6 Ruby 初心者 bootstrap4 Ruby テキストリンク

Rails6でアプリケーションにBootstrapを導入した際の手順をまとめてみました。

完成形


Bootstrapの導入までは以下をコピペ

Bootstrapの導入

jQuery、Bootstrap、popper.jsの導入
ターミナル
yarn add jquery bootstrap popper.js
webpackの設定
config/webpack/environment.js
const { environment } = require('@rails/webpacker')

//ここから
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)
//ここまでを追加

module.exports = environment
javascriptフォルダ内にstylesheetsとapplication.scssを作成
ターミナル
mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss
Bootstrap、CSSをインポート
app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
アプリケーションのheadに以下を追記
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
画像を読み込ませる

バックグラウンドに画像を挿入する場合は作成してください

ターミナル
mkdir app/javascript/images

resolved_paths:[　]の中に'app/javascript/images', 'app/assets/images'を記述

config/webpacker.yml
resolved_paths: ['app/javascript/images', 'app/assets/images']

導入完了

トップページの作成

コントローラーとビューの作成
ターミナル
rails g controller home index
config/routes.rb
Rails.application.routes.draw do
  root to: 'home#index'
end
ビューの編集
app/views/home/index.html.erb
<div class="jumbotron">
  <div class='index-content text-center'>
    <h1 class='home-index'>レシピを共有しよう!</h1>

    <div class='index-btn d-flex justify-content-around'>
      <%= link_to '新規登録', "#", class: "btn btn-success btn-lg" %>
      <%= link_to 'ログイン', "#", class: "btn btn-success btn-lg" %>
    </div>
  </div>
</div>

ここまででこんな感じ

CSSをあてる
ターミナル
touch app/javascript/stylesheets/home.scss
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
@import './home.scss'; #追記

app/javascript/imagesに適当な画像を配置する

app/javascript/stylesheets/home.scss
.jumbotron{
  background-image: url('../images/cooking.jpg');
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.home-index{
  font-weight: bold;
  font-size: 50px;
  color: purple;
  text-shadow:0 0 10px #FF0;
}

.index-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.index-btn{
  margin-top: 20px;
}

完成