如何通过自己的样式扩展引导程序？答案

【问题标题】：How to extend bootstrap by own styles?如何通过自己的样式扩展引导程序？
【发布时间】：2020-06-16 15:58:13
【问题描述】：

我已将 bootstrap 4.5 安装到 RAILS 6 中，我想扩展一些样式。

为此，我在 app/assets/stylesheets 中有一个名为banana.scss 的文件，如下所示：

.form-read-only {
 @extend .form-control, .form-control-sm;
 background-color: rgb(233, 236, 239)
}

现在我想在加载引导程序后嵌入这个样式表，所以我修改了 app/assets/stylesheets/application.css

/*
 ...
 *= require banana
 *= require_tree .
 *= require_self
*/

@import 'bootstrap';
@import 'banana';

但这会导致浏览器中的错误信息为：

Error: The target selector was not found.
       Use "@extend .form-control-sm !optional" to avoid this error.
        on line 5 of app/assets/stylesheets/banana.scss
>>   @extend .form-control, .form-control-sm;

但是扩展 bootstrap 的推荐方式是什么？

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-6

【解决方案1】：

我认为唯一的问题是你 *= require banana 在你 @import 'bootstrap' 之前。尝试删除第一个：

/*
 ...
 *= require_tree .
 *= require_self
*/

@import 'bootstrap';
@import 'banana';

【讨论】：

【解决方案2】：

我找到了一种简单的方法来实现这一点。

只需在我的自定义样式表的开头导入引导程序：

@import 'bootstrap';

.form-read-only {
  @extend .form-control, .form-control-sm;
  background-color: rgb(233, 236, 239)
}

因为我无法定义加载样式表文件的顺序，所以这里我确定加载自定义样式表时，会先加载依赖的引导程序样式表。

【讨论】：