无法覆盖 Rails 4 中的引导变量答案

【问题标题】：Cannot override Bootstrap variables in Rails 4无法覆盖 Rails 4 中的引导变量
【发布时间】：2014-03-19 16:16:32
【问题描述】：

这是特定于 Rails 版本 4 的。

我有一个“custom.css.scss”，并且正在使用“navbar navbar-fixed-top navbar-inverse”的引导类'，然后是 navbar-inner 的 div 和 div 容器。

无论我将变量放在哪里，无论是在包含 @bootstrap 之前还是之后，我都无法更改 Bootstrap 反向导航栏的黑色。

这是我的“custom.css.scss”文件的第一部分，我只是尝试将整个该死的东西设置为紫色：

$navbar-inverse-color:                #9b59b6;
$navbar-inverse-bg:                   #9b59b6;
$navbar-inverse-border:               #9b59b6;
$navbar-inverse-link-color:           #9b59b6;
$navbar-inverse-link-hover-color:     #9b59b6;
$navbar-inverse-link-hover-bg:        #9b59b6;
$navbar-inverse-link-active-color:    #9b59b6;
$navbar-inverse-link-active-bg:       #9b59b6;
$navbar-inverse-link-disabled-color:  #9b59b6;
$navbar-inverse-link-disabled-bg:     #9b59b6;
$navbar-inverse-brand-color:          #9b59b6;
$navbar-inverse-brand-hover-color:    #9b59b6;
$navbar-inverse-brand-hover-bg:       #9b59b6;
$navbar-inverse-toggle-hover-bg:      #9b59b6;
$navbar-inverse-toggle-icon-bar-bg:   #9b59b6;
$navbar-inverse-toggle-border-color:  #9b59b6;


@import "bootstrap";

/* mixins, variables, etc. */

但是，它保持完全相同的黑色（反向）导航栏。样式的其他方面（下面是 mixins、变量等的位置）都可以正常工作，我可以更改元素颜色和样式没问题。

我正在使用带有 Rails 4.0.3 的 bootstrap-sass 和 sass-rails 最新版本。我整天都在做这个，看不出有什么办法可以改变引导变量，从而改变我的颜色。

非常沮丧，希望有人可以提供帮助:)

编辑：共享提供导航栏（标题）的代码

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class ="navbar-inner">
    <div class="container">
      <%= link_to 'Tracker', root_path, id: "logo" %>
      <nav>
        <ul class="nav pull-right">
          <li><%= link_to "Home",    root_path %></li>
          <li><%= link_to "Help",    help_path %></li>
          <li><%= link_to "About",   about_path %></li>
          <li><%= link_to "Sign in", "#" %></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

【问题讨论】：

覆盖变量不会改变导航栏样式，您必须在样式表中使用它。例如：如果你想改变导航栏背景，那么你可以做类似 .navbar-inverse{background:$navbar-inverse-bg;}
您的代码看起来不错。变量应设置在@import "bootstrap" 之前。你能分享你使用navbar-inverse的代码吗？另外，引导程序是否正确加载到应用程序中，您是否看到它应用于其他元素？
Deep：这没什么区别，恐怕它仍然是完全相同的黑色反向导航栏:(
您有没有为此找到解决方案？我也有同样的经历。谢谢。
有趣的是，我复制了你的代码，把它放进去，它工作得很好......我有很多相同的环境。谢谢。

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

【解决方案1】：

原因是变量 context/scope 丢失了。您需要确保只直接导入 下划线 文件，然后您的变量将被识别。

非下划线导入的 scss/sass 文件将开始其自己的变量上下文/范围，忽略它上面的任何内容。

我检查的 3.3.1 版本中最新的引导顶级文件是 _bootstrap.scss。这是最近的更改（旧是 bootstrap.scss），从 3.1.1 升级时我只需要更新一些项目构建文件。在这种情况下，您可能只想更新您的 bootstrap-sass 依赖项，它可能刚刚开始为您工作！

【讨论】：

我知道 stackoverflow 不会让我用“谢谢”发表评论，但谢谢你拯救了我的一天。

【解决方案2】：

假设您正在引用并配置了 Bootstrap gem（'bootstrap' 或 'bootstrap-sass'），请在 app/assets/stylesheets 文件夹中创建一个文件，该文件的名称将导致它在之前加载“application.scss”（例如“_custom_variables.scss”）。

在此文件中，首先导入“bootstrap/variables”（在 gem 中的“_bootstrap.scss”文件中指定。）然后进行自定义。这是文档中没有强调的“一个小细节”！

请注意，这些只是 Bootstrap 变量覆盖，在 Bootstrap 加载后，您的“常规”自定义项仍将位于“custom.css.scss”中。

接下来，在 @import "bootstrap" 语句之前的 'application.scss' 中引用您的自定义文件。

例子：

在您的变量自定义文件中，_custom_variables.scss：

// app/assets/stylesheets/_custom_variables.scss
@import "bootstrap/variables";
$body-bg:    $gray-dark;
$body-color: $gray-light;

在 application.scss 中：

// app/assets/sytlesheets/application.scss   

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "custom_variables";
@import "bootstrap";

【讨论】：