我正在开始一个新项目，并且正在使用bootstrap-sass作为前端布局工具。

我正在尝试覆盖bootstrap sass中的某些变量，虽然我可以覆盖其中的一些变量，但其他变量没有改变。

我创建了一个简单的模板，以在更改它们时查看每个主要的颜色替代：

<div class="well">
    <ul>
        <li><dropzone></dropzone></li>
        <li><gallery></gallery></li>
        <li><location></location></li>
        <li><locations></locations></li>
        <li><pp-image></pp-image></li>
        <li><map></map></li>
    </ul>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        test
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        test
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        test
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        test
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        test
    </div>
</div>

然后在我的scss入口点中main.scss，创建了变量覆盖，然后导入了bootstrap-sass：

$color1: #D800E5;
$color2: #010B3A;
$color3: #2300F5;
$color4: #FB0026;
$color5: #B34D30;
$color6: #FBFEFB;

$gray-base:              green;
$gray-darker:            lighten($gray-base, 13.5%);
$gray-dark:              lighten($gray-base, 20%);
$gray:                   lighten($gray-base, 33.5%);
$gray-light:             lighten($gray-base, 46.7%);
$gray-lighter:           lighten($gray-base, 93.5%);

$brand-primary:         darken($color1, 6.5%);
$brand-success:         $color3; 
$brand-info:            orange; // i also tried using regular color assignments in case it was a variable issue. these don't work either
$brand-warning:         green;
$brand-danger:          yellow;


$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

body{
    background-color:$color2;
    color: $color2;
}

当我在浏览器中查看模板时，原色替代有效，但灰色替代和基于状态的替代却不起作用：

我仍在研究文档以弄清楚自己在做错什么，但我认为对于熟悉前端样式的人来说，这可能是显而易见的。