More than 3 years have passed since last update.

Rails Bootstrapの環境設定の仕方

Last updated at 2021-08-18Posted at 2021-08-18

##Bootstrapの環境設定の仕方
###1:Gemfileにコードを追加

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails <=Rails6では追加の必要がない
gem 'bootstrap-sass'

$ bundle install

###2:application.html.erbにコードを追加

views/layouts/application.html.erb

<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</head>

###3webpackの設定ファイルを編集

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery

###4application.jsファイルを編集

javascript/packs/application.js

//= require popper
//= require bootstrap-sprockets

##参考記事
【Rails6】jQueryがなかなか使い始められない人へ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up