如何使用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中的变量，则必须在导入前{strong> 之前放置它们{strong>

根据Bootstrap：

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

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

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

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

所以您应该拥有style.scss：

_variables-custom.scss

_variables.scss：

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

_variables-custom.scss：

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