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

1 minute read

*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.

Since it is a framework that has been used for many years and has been adopted many times, if it is used in the default setting, It may be ridiculed as “Bootstrap odor”, You can flexibly change the UI by customizing.

This time, in Bootstrap 5.0 introduced with webpacker in Rails 6.0 environment, I will show you how to customize each variable.

Overview

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

References and articles

The method introduced in the following article is the method applied when managing css with webpacker.

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

In addition, we are referring to the method introduced on the official page of the link below.

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

Premise

  • The css is managed by webpacker in Rails settings. (In this article, app/javascript/src/application.scss is located)
  • Bootstrap is installed with a package manager (such as yarn). (In this article, 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 in app/javascript/src folder.

Change the file name in app/javascript/src

app/javascript/src/bootstrap.scss is _bootstrap-custom.scss, app/javascript/src/_variables.scss rename the file to _bootstrap-custom-variables.

application.scss settings

Add the following code to 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 is possible to customize by changing each variable of app/javascript/src/_bootstrap-custom-variables.

Since many variables are set, you can uniformly apply the original UI depending on the changes.

Example: When 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

At snowwshiro, which I run now, the bootstrap-like finish is still available due to the minimum customization, but we are working hard to customize this fall. is.