一些 bootstrap-sass (v2.0.3) 变量的自定义值不起作用答案

【问题标题】：Custom values for some of the bootstrap-sass (v2.0.3) variables not working一些 bootstrap-sass (v2.0.3) 变量的自定义值不起作用
【发布时间】：2012-06-05 08:03:28
【问题描述】：

我正在尝试覆盖引导程序提供的一些默认变量，特别是一些默认颜色和字体设置，但似乎只有少数生效。这是我的 custom.css.scss 的顶部：

$myOrange:#f89406;
$myBlueDark: #304269;
$myBlue: #91BED4;
$myBlueLight: #D9E8F5;
$myWhite: #eee;
$myGrayBlue: #43464C;

/* colors */
$linkColor: $myBlueDark;
$navbarBackground: $myBlueDark;
$navbarBackgroundHighlight: lighten($navbarBackground, 10);
$navbarLinkColor: darken($myOrange, 10);
$navbarLinkColorHover: $myOrange;
$bodyBackground: #000;
$dropdownBackground: $myBlueDark;
$dropdownLinkColor: $myOrange;
$hrBorder: $myBlue;
$heroUnitBackground: lighten($myOrange, 20);
$dropdownLinkColorHover: $myOrange;

/* typography */
$sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif;
$baseFontSize: 16px;

@import 'bootstrap';

// ... rest of the css ....

这里我为一些引导变量指定了值，并希望字体是指定的，链接颜色是我设置的值。

但是，我注意到这些值中只有少数有效。例如。我页面上的字体仍保持引导默认值（Helvetica Neue），但导航栏颜色更改为正确的值。

我在互联网上四处搜索，但我找到的解决方案都没有奏效。记录了一个与此问题类似的问题，但它已被关闭：https://github.com/thomas-mcdonald/bootstrap-sass/issues/102

我会继续对该线程发表评论，但我只是想确保我没有遗漏任何东西。

还有一点需要注意，稍后我会在 custom.css.scss 中明确执行此操作：

@mixin default_font {
  font-family: "PT Sans Narrow", "Lucida Grande", sans-serif;
  font-weight: 400;
}

body {
  padding-top: 60px;
  background-color: #D9E8F5;

  @include default_font;
}

字体显示正常。由于同样的问题，我在这里指定background-color。

我正在使用 bootstrap-sass v2.0.3。我做错了什么或遗漏了什么？

谢谢。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap sass

【解决方案1】：

当我正在开发一个演示应用程序来重现我的问题时：https://github.com/verma/bootstrap-sass-tests 我重新启动了 rails 开发服务器。

这似乎已经解决了这个问题。我不确定这是否是永久修复，所以我会等待，然后再将此问题标记为已回答。

【讨论】：

我遇到了同样的事情：因为我的 sass 更改不会立即生效而感到困惑。我还将重新启动 Rails 服务器以强制更改显示在浏览器中。
这是在开发还是生产中？如果您已编译资产，则需要重新编译然后重新启动服务器以使任何样式表或 JS 文件更改生效。在开发模式下，您可以从 /public/assets 中删除已编译的资产，Rails 应该从实际的样式表中读取它。
这是在生产中。我从来没有真正编译过任何资产。

【解决方案2】：

从 header 元素的类属性中删除 navbar-inverse 样式可能会解决问题。

举例：

<header class="navbar navbar-fixed-top">

【讨论】：

【解决方案3】：

嗯，我很幸运地将它用于字体和链接颜色：

$baseFontSize:          17px;
$baseFontFamily:        'Crete Round', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$baseLineHeight:        20px;
$altFontFamily:         'Open Sans Condensed', Georgia, "Times New Roman", Times, serif !default;

$headingsFontFamily:    'Alfa Slab One'; // empty to use BS default, @baseFontFamily
$headingsFontWeight:    normal;    // instead of browser default, bold
$headingsColor:         $blueDark;

$linkColor:             $blueDark;

您可以使用的变量可以在_varibles.scss file中找到。

【讨论】：

感谢您的回复。我可以使用 $baseFontFamily 更改字体，但我仍然无法更改其他一些变量。有些变量起作用而其他变量不起作用，这有点奇怪。我试图覆盖的所有变量都有 !default 修饰符，所以东西应该可以工作：/ .

【解决方案4】：

您的 application.css.scss 文件是什么样的？我遇到了类似的问题，发现我有另一个样式表覆盖了我的基本字体，这是我不想要的。确保您没有其他导致覆盖的文件（例如scaffolds.css），并确保您没有启用require_tree 选项。

【讨论】：

【解决方案5】：

我将 !important 附加到 body 的字体系列中，这解决了我的问题。

上下文：我的 Rails 5 应用程序有一个类似的问题，我的自定义字体 (.otf) 没有应用。在开发者控制台中，我看到正文字体应用为“Helvetica Neue”，我认为这是来自 bootstrap-sass。

body { 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif 
...

当我取消选中 font-family: "Helvetica Neue" 时，我看到我的字体符合预期，因此我知道我的自定义字体的资产管道工作正常。

添加 !important 似乎解决了我的问题。

body {
  font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important;
}

【讨论】：