使用 bootstrap sass，一些变量没有被覆盖

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

您正在对要以绿色而不是灰色显示的元素使用 well class。

但是井的默认颜色 is defined as:

$well-bg:                     #f5f5f5 !default;
$well-border:                 darken($well-bg, 7%) !default;

所以如果你想改变井的颜色，你应该改变$well-bg的颜色。如果您想查看使用 $gray-base 颜色的元素，请在 this file.

中搜索 $gray

OP 编辑

请注意，您要覆盖的变量名称可在文件中找到：_bootstrap-variables.scss。

如果您通过 npm（我在这个项目中正在做）引入 bootstrap-sass，可以在

找到该文件

node_modules/bootstrap-sass/templates/project/_bootstrap-variables.scss

Answer 2

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

使用 bootstrap sass，一些变量没有被覆盖

Using bootstrap sass, some variables are not being overridden

css

overriding

sass

twitter-bootstrap

OP 编辑

使用 bootstrap sass，一些变量没有被覆盖

Using bootstrap sass, some variables are not being overridden

css

overriding

sass

twitter-bootstrap

OP 编辑​​

OP 编辑