*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.
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.
In addition, we are referring to the method introduced on the official page of the link below.
- Bootstrap is installed with a package manager (such as yarn). (In this article, node_modules/bootstrap is installed)
Copy the files in app/node_modules/bootstrap
/* @import "~bootstrap/scss/variables"; */ @import "bootstrap-custom-variables";
How to customize
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
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$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.