Question

这是Rails第4版特有的。

我有一个fie＆＃34; custom.css.scss＆＃34;我正在使用bootstrap类＆＃39; of＆＃34; navbar navbar-fixed-top navbar-inverse＆＃34;接着是一个navbar-inner和div容器的div。

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

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

$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. */

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

我在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>

Answer 1

原因是变量上下文/范围丢失了。您需要确保只直接导入下划线文件，然后才能识别您的变量。

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

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

Answer 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";

无法覆盖Rails 4中的Bootstrap变量

2 个答案: