[Rails 6] Customize Bootstrap in Rails + Bootstrap 5.0.0-alpha environment

Bootstrap has been introduced in many projects as a CSS framework, In June 2020, 5.0 alpha was released as a major version upgrade.

If it is used with the default settings, it has been adopted by many frameworks that have been used for many years. Sometimes ridiculed as "Bootstrap odor", It is possible to flexibly change the UI by customizing it.

This time, in Bootstrap 5.0 introduced by webpacker in Rails 6.0 environment, Learn how to customize each variable.

Overview

Overwrite and change the value of _variables.scss set in Bootstrap from another file.

References / Articles

About the method introduced in the following article, it is a method applied when managing css with webpacker.

http://koyacch.hatenablog.com/entry/2018/02/23/162213

Also, I refer to the method introduced on the official page of the link below.

https://v5.getbootstrap.com/docs/5.0/customize/sass/

Premise

--Css is managed by webpacker in Rails settings. (In this article, it is assumed that app / javascript / src / application.scss is placed) --Bootstrap is installed with a package manager (such as yarn). (In this article, it's assumed that node_modules / bootstrap is installed)

Setup steps

Copy the files in app / node_modules / bootstrap

Copy bootstrap.scss and _variables.scss in app / node_modules / bootstrap and paste them into the app / javascript / src folder.

Rename the file in app / javascript / src

app / javascript / src / bootstrap.scss can be found in _bootstrap-custom.scss app / javascript / src / _variables.scss renames the file to _bootstrap-custom-variables.

application.scss settings

Write the following code in app / javascript / src / application.scss.

application.scss


@import 'bootstrap-custom';

_bootstrap-custom.scss settings

Edit app / javascript / src / _bootstrap-custom.scss as follows.

Change before

_bootstrap-custom.scss


@import "~bootstrap/scss/variables";

After change

_bootstrap-custom.scss


/* @import "~bootstrap/scss/variables";
 */
@import "bootstrap-custom-variables";

How to customize

It can be customized by changing each variable in app / javascript / src / _bootstrap-custom-variables.

Since many variables are set, you can apply the original UI in a unified manner depending on the changes.

Example: If you want to reduce the overall font size

Change before

_bootstrap-custom-variables


$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`

After change

_bootstrap-custom-variables


$font-size-base: 0.9 rem !default;

At the end

The snowwshiro that I currently run has a Bootstrap-like finish due to the minimum customization, but I am working hard to customize it for the renewal this fall. is.

Recommended Posts

[Rails 6] Customize Bootstrap in Rails + Bootstrap 5.0.0-alpha environment
Show Better Errors in Rails + Docker environment
[Rails] Reset the database in the production environment
Group_by in Rails
(Basic authentication) environment variables in rails and Docker
[Rails] Run LINEBot in local environment using ngrok
rails tutorial About account activation in production environment
Rails5.1 + puma SSL connection in local production environment
500 Internal Server Error occurs in Rails production environment
[Ruby on Rails] How to install Bootstrap in Rails
[Rails] How to use PostgreSQL in Vagrant environment
Migration error after Activerecord association in Rails5 + Docker environment (2)
Sharing research on ER diagram automation in Rails environment
Model association in Rails
Rails Docker environment construction
Adding columns in Rails
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Migration error after Activerecord association in Rails5 + Docker environment
CSRF measures in Rails
Regarding overcapacity when setting Rails tutorial environment in Cloud 9
I put Bootstrap in Rails6. (Sprockets :: Rails :: Helper :: AssetNotPrecompiled handling)
^, $ in Rails regular expression
Use images in Rails
Understand migration in rails
SSL in the local environment of Docker / Rails / puma
Split routes.rb in Rails6
Beginners use ubuntu in windows to prepare rails environment
Implement markdown in Rails
exited with code 1 error resolution with docker-compose up in rails environment
Exit code 1 occurs when Rails is stopped in Docker environment
Get UserAgent in [Rails] controller
Implement application function in Rails
Rails6 development environment construction [Mac]
Declarative transaction in Rails #ginzarb
Rails6 (MySQL, Ubuntu environment, Cloud9)
Rails environment construction Rails5.2.1 ruby2.5.1 Catalina
Implement follow function in Rails
Japaneseize using i18n with Rails
Implement LTI authentication in Rails
[Environment variables] What are rails environment variables?
Error in rails db: migrate
Introducing Bootstrap and Font-Awesome (Rails)
Gem often used in Rails
JavaFX environment construction in Java 13
[Docker] Rails 5.2 environment construction with docker
Implement import process in Rails
[Rails / MySQL] Mac environment construction
Use multiple checkboxes in Rails6!
Rewrite Routes in Rails Engine
[Rails] How to execute "rails db: create" etc. in production environment EC2
Can't output PDF in production environment (EC2, Amazon Linux) with Rails
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
Build an environment for Rails projects under Git management in Cloud9
When log data accumulates in Rails and the environment stops working
Install Rails in the development environment and create a new application
[Rails] How to reset the database in production environment (Capistrano version)