I will explain how to install Bootstrap in Rails. The procedure is very simple, so please refer to it! !! There are four steps.
** 1. Install Bootstrap 2. Create SCSS file 3. Modify JS file 4. Restart Rails (Puma) **
When using Bootstrap with Rails, it is common to install using gem. Bootstrap uses jQuery internally, so let's install it as well. Add the following to your Gemfile and try running bundle install.
Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
Terminal
% bundle install
** Next, rename application.css to the file name application.scss. ** ** This is because Bootstrap is written in the notation "SCSS" and is also used in Rails. "SCSS" is a notation that extends CSS, and is a notation that is widely used in the current Web industry. I won't explain it in detail here, but think of it as a notation that is easier to read and write than the CSS description.
Change file extension
Before change app/assets/stylesheets/application.css
After change app/assets/stylesheets/application.scss
After renaming the file, actually open the file. *** = require_tree. And * = require_self are deleted and Add @import "bootstrap" ;. ** ** The added code will be the setting for loading Bootstrap.
app/assets/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .<(Deleted)
*= require_self <(deleted)
*/
@import "bootstrap";<(Addition)
Set to read related files such as "JavaScript" and "jQuery" used in Bootstrap. Open app / assets / javascripts / application.js and add it above the original code referring to the following.
app/assets/javascripts/application.js
#Added the following three
//= require jquery3
//= require popper
//= require bootstrap
#Original code
//= require rails-ujs
//= require activestorage
//= require turbolinks
Please try to access it from your browser once. If you see an error at this stage, restart Rails (Puma). If the error still persists, the version of "node.js" may be out of date. If you built Rails with Docker, please check if the Dockerfile has the following settings.
Dockerfile
#Install the required packages for Rails
RUN apt-get update -qq && apt-get install -y nodejs
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
&& apt-get install -y nodejs
#In the description of the official website below, node.The version of js is low and bootstrap cannot be used
# RUN apt-get update -qq && apt-get install -y nodejs
You may find the installation procedure difficult, but you can delete the description or follow the procedure described here. It's surprisingly easy because you just need to rewrite it. Please give it a try! !!
Recommended Posts