如何使用SASS更改成功按钮的颜色？

Question

目前，我主题的成功按钮为绿色。我想把它放成黄色。我该怎么做？

_variables.scss文件中有以下几行：

$btn-success-color:              $btn-default-color !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

我在自定义文件style.scss中添加了以下几行：

$btn-success-color:              #000 !default;
$btn-success-bg:                 #FFD700 !default;
$btn-success-border:             #FFD700 !default;

我不知道这是否是正确的方法，但是它不起作用。

我已将更改与主题一起编译，但成功按钮始终为绿色。

Answer 1

如果您真的想覆盖style.scss中的变量，则必须将它们放置在之前导入_variables.sccs

根据Bootstrap：

同一Sass文件中的变量替代可以在之前或之后出现 默认变量。但是，在覆盖Sass文件时， 您的替代项必须在导入Bootstrap的Sass文件之前出现。

如果您想以一种简洁的方式进行此操作，建议您首先加载默认的引导程序变量，然后从另一个文件（例如_variables-custom.scss）加载您的自定义变量。

在_variables-custom.scss中，复制/粘贴_variables.scss中的值以覆盖它们。您必须记住几件事：

1. _variables-custom.scss必须导入之后默认的_variables.scss
2. 您必须删除!default中的所有_variables-custom.scss，它们才能正确覆盖_variables.scss值。
3. [如果可能，我建议不要在_variables-custom.scss之外存储任何变量，这样当您搜索var时，便知道它在哪里。

所以您应该拥有style.scss：

@import 'variables.scss'
@import 'variables-custom.scss'

_ variables.scss：

$btn-success-color:              $btn-default-color !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

_ variables-custom.scss：

$btn-success-color:              #000 ;
$btn-success-bg:                 #FFD700;
$btn-success-border:             $btn-success-bg;