按OP

Question

我正在开始一个新项目，并且我使用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;
}

当我在浏览器中查看模板时，主要颜色覆盖有效，但灰色覆盖和基于状态的覆盖没有：

我仍在挖掘文档以弄清楚我做错了什么，但我认为对于那些对前端造型更熟悉的人来说，这可能是显而易见的。

Answer 1

您正在使用绿色而不是灰色的元素上使用Function1类。

但是is defined as的默认颜色：

well

因此，如果您想更改井的颜色，则应更改$well-bg: #f5f5f5 !default; $well-border: darken($well-bg, 7%) !default;的颜色。如果您想查看使用$well-bg颜色的元素，请在this file中搜索$gray-base。

按OP

编辑

请注意，您要覆盖的变量的名称可在文件中找到：$gray。

如果你通过npm（我在这个项目中做的那样）拉入bootstrap-sass，可以在

找到该文件

_bootstrap-variables.scss

Answer 2

您应该为成功面板覆盖此变量$panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border，为其他面板覆盖类似。

使用bootstrap sass，一些变量不会被覆盖

2 个答案:

按OP