1.SCSS是Rails和Bootstrap的标准语言
我们将使用的语言是SCSS（Sassy CSS）。它是一个著名的CSS预处理器，在Bootstrap和Rails空间都大量使用。除其他外，它为普通的旧CSS语言添加了变量、函数、映射和语法糖。好消息是，在编写SCSS文件时，普通的旧CSS仍然有效，所以入门门槛很低。
2.文件结构
创建一个空文件app/frontend/css/customized_bootstrap.scss
这将是我们的主要定制文件。
打开app/frontend/pack/application.scss，然后复制/粘贴以下代码。
@import '../css/customized_bootstrap.scss';
@import "~bootstrap/scss/bootstrap";
因此，你最终应该得到以下的文件结构。
+-- app
+-- frontend
+-- css
+-- customized_bootstrap.scss
+-- packs
+-- application.scss
作为提醒，"frontend/packs "目录下的所有内容都将被webpacker编译，并且可以被任何HTML文件引用。
在 "frontend "目录下的其他目录可以被认为是私有的：我们的应用程序可以使用这些文件，但它们对终端用户是不可见的。
因此，到目前为止，一切都应该是合乎逻辑的：我们有一个用于整个应用程序的样式表包，以及一个主要的定制文件，它将允许我们对Bootstrap进行微调。
3.主要定制文件：结构
现在把下面的代码复制/粘贴到app/frontend/css/customized_bootstrap.scss 。
/**
* 1 - Set SCSS variables below
*/
/**
* 2 - Import bare minimum of bootstrap
*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
/**
* 3 - Now you can refine Bootstrap here
*/
正如你所看到的，有三个部分。
首先，你设置变量。可以是Bootstrap的一些，也可以是你自己的。第二，你导入所有Bootstrap的变量和函数。别担心，Bootstrap不会覆盖你之前定义的变量。最后，你可以定义任何依赖任何变量的CSS选择器。
4.主要定制文件：微调
对于Bootrails来说，这里是我如何使用这个自定义文件的（非常简化）概述。
/**
* Set SCSS variables below
*/
// Custom variable, prefix with my- to avoid confusion
$my-navbar-height: 60px;
// Bootstrap setting
$enable-negative-margins: true;
// Bootstrap variable : typography
$lead-font-weight: 400;
/**
* Import bare minimum of bootstrap
*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
/**
* 3 - Now you can refine Bootstrap here
*/
// missing utility function
.cursor-pointer {
cursor: pointer;
}
// new utility class that relies on Bootstrap variable
.halflead {
font-size: $font-size-base * 1.125;
}
5.为Bootstrap添加自定义组件
请注意，主要的定制文件应该保持相对较小的规模，我想说我最终会有几百行，但不会更多。
为了避免维护方面的噩梦，你必须依靠小的SCSS组件，这些组件只专注于一件事（单一责任原则）：对一个明确的HTML片段进行样式设计：一个页脚（c-footer.scss），一个博客文章（c-article.scss），等等。
旁注：这并不是Rails或Bootstrap所特有的。"保持小而专注 "是一个众所周知的编程原则。
那么现在，你如何实现这一点？
创建一个文件夹app/frontend/css/components
并引用里面的任何文件，感谢主入口文件application.scss，像这样。
// inside app/frontend/packs/application.scss
@import '../css/customized_bootstrap.scss';
@import "~bootstrap/scss/bootstrap";
// Automagically loads all our custom components thanks to node-sass-glob-importer
@import '../css/components/*.scss';
现在我们的树状结构看起来像这样。
+-- app
+-- frontend
+-- components
+-- c-article.scss
+-- c-footer.scss
+-- ...
+-- css
+-- customized_bootstrap.scss
+-- packs
+-- application.scss
注意使用 "c-"作为前缀，这被称为BEM惯例。因为Bootstrap不遵循这个惯例，所以它能让人一眼就看出这些组件是我们自己的，避免与Bootstrap自己的组件混淆。
6.总结
用Rails定制Bootstrap并不复杂：Bootstrap v5打开了大门（和变量文件），使之变得简单。别担心，如果事情变得太复杂，仍有可能覆盖选择器，同时保持一个漂亮的CSS结构。
