--For those who are starting to learn Ruby on Rails6 (hereinafter Rails6) --Those who want to use Bootstrap 4 with Rails 6 --Programming beginner (the person who writes is also a beginner) --Those who are creating a portfolio aiming to be an engineer and want to apply CSS that feels crisp and good --Those who want to use Bootstrap 4 for Rails 6 but are wondering which method to install because the description differs depending on the article.
↑ I was in such a state myself, so I decided to write an article.
** (Addition: Precautions 2020/12/25) ** In the local development environment, it can be applied as follows. However, since Bootstrap cannot be reflected in the production environment (production) such as heroku and AWS, we are checking the permanent support method.
The method that is provisionally supported is described near the end.
--Standing on the starting line to use Bootstrap 4 with Rails 6
Therefore, this article describes the procedure to install Bootstrap 4 on the Rails 6 app and check the operation.
Bootstrap is a web design framework that uses HTML, CSS, and JavaScript. Responsive design also supports terminal display such as smartphones. Therefore, it is recommended when you want to make the app look crisp and nice. Bootstrap official website
It seems that the α version of Bootstrap 5 = test version is also available (as of December 2020) This article is an article of "Introduction to Bootstrap 4". Please be careful.
There are multiple ways to install Bootstrap 4 in Rails 6, one is to install it with gem and the other is to use webpacker, but this time I decided to use the latter "webpacker".
When I googled before the introduction, there were some articles saying that Bootstrap could not be customized if gem was introduced (?), Or I introduced it once by myself using the gem method and it didn't feel right ...
I will try to follow the advantages and disadvantages of each if I have time.
We will proceed on the assumption that yarn is already installed (though many people have already installed it)
Also, create a Rails project (application) to which Bootstrap 4 is applied with rails new.
For reference, my working environment is as follows.
The Bootstrap 4 related files to be installed this time are as follows. Along with Bootstrap4, we will also introduce related files jQuery and popper.js. (As of December 2020)
Execute by typing yarn add bootstrap jquery popper.js in the terminal.
With the above command, not only Bootstrap4 but also jQuery and popper.js could be installed together.
(If you want to specify the version strictly, it may be better to write something like yarn add [email protected] [email protected] [email protected])
It looks like the following.
app/javascript/packs/application.js
# <abridgement>
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
#Add the following 2 lines
import 'bootstrap' # <-Postscript
import 'bootstrap/scss/bootstrap.scss' # <-Postscript
# <abridgement>
(Addition: 2020/12/23) This work may not be necessary for those who normally use CSS instead of SCSS.
App/assets/stylesheets/application.css → Change the extension like application.scss. All the items listed by default have been deleted.
If you want to read other CSS files, please add them to application.scss as appropriate.
app/assets/stylesheets/application.scss
@import "hogehoge.css";
After installing it, check the operation. In index.html.erb, write the wording to which the Bootstrap class is applied. If the description is as below, it has been applied when the characters are actually displayed and the characters are displayed in yellow and the background is displayed in blue. Bootstrap installation work is complete.
ruby:index.html.erb
<!--Letter color:Yellow, background color:Blue-->
<p class="text-warning bg-primary">Bootstrap test</p>
** (Addition: 2020/12/25) ** When I deployed to the production environment (production. In my case, I used AWS EC2), I encountered that Bootstrap was not reflected. I checked with my browser's verification tool and found that Bootstrap related files may not be loaded properly. (Something related to the asset pipeline?)
Therefore, although it is a brute force, I decided to temporarily support it by referring to the external library only in the production environment. I decided to load the Bootstrap official jsdelivr tag directly.
ruby:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Fishing Archive</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%#=From here, provisional measures to reflect Bootstrap production. Reflect only during production.%>
<% if Rails.env.production? %>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<% end %>
<%#=Up to this point, provisional measures to reflect Bootstrap production%>
<%= javascript_pack_tag 'application' %>
</head>
I will add it when I find a permanent countermeasure.
Bootstrap is useful for small designs. I'm going to play with it!
Since this is my first post on Qiita, I wrote it as a practice for markdown notation. Since both Rails and Bootstrap are beginners, I would appreciate it if you could point out any lack of explanation or mistakes.
Recommended Posts