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

• This is Qiita's first post. Thank you.

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.