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

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;
}

完成