如何覆盖这些Bootstrap 3颜色

Question

在Bootstrap 3中，我可以覆盖brand-primary，但没有其他品牌颜色，例如品牌成功。为什么会这样？

我使用Bootstrap作为Laravel 5.5安装的一部分，包括包含Laravel Mix，webpack等的前端工具。

在main.scss文件的顶部，我有以下两行：

@import "_variables";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

在我的_variables.scss文件的顶部，我有以下两行：

$brand-primary: #ff0000;
$brand-success: #ff0000;

正如您所看到的，我将品牌主要和品牌成功都设置为纯红色。

在我的html中，如果我使用<div class="panel panel-primary">创建面板，则面板将显示红色边框。但是，如果我使用<div class="panel panel-success">，则面板会保持原点绿色。

当我查看div元素上的级联CSS规则列表时，我看不到红色的痕迹被覆盖，所以必须是SASS没有输出它。为什么会这样？

Answer 1

为什么我不能通过在浏览器中检查元素的CSS来看到sass变量被覆盖？

Sass转换为CSS，并且在该点之后不再存在所有sass变量。虽然sass变量可能在 sass的上下文中具有级联行为，但是我们可以在浏览器中检查没有级联的sass变量，因为浏览器只加载处理过的CSS。

为什么.panel-success没有使用我在$brand-primary上设置的颜色值？

应用于.panel-success类的颜色不基于$brand-success变量。

他们间接基于$state-success-text和$state-success-border的值，不基于$brand-success

.success-panel颜色直接基于变量：

• $panel-success-text
• $panel-success-border
• $panel-success-heading-bg

来自bootstrap-sass _variables partial：

$panel-success-text:          $state-success-text !default;
$panel-success-border:        $state-success-border !default;
$panel-success-heading-bg:    $state-success-bg !default;

来自bootstrap-sass _panels partial：

.panel-primary {
  @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
}