[英]Still cannot override bootstrap variables in twitter-bootstrap-rails gem
[英]Cannot override Bootstrap variables in Rails 4
这是Rails版本4特有的。
我有一个fie“custom.css.scss”并使用“navbar navbar-fixed-top navbar-inverse”的bootstrap类,后跟一个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>
原因是变量上下文/范围丢失了。 您需要确保只直接导入下划线文件,然后才能识别您的变量。
非下划线导入的scss / sass文件将开始它们自己的变量上下文/范围,忽略它上面的任何内容。
我检查的版本3.3.1中的最新引导程序顶级文件是_bootstrap.scss
。 这是最近的一个更改(旧的是bootstrap.scss
),我只需要在从3.1.1升级时更新一些项目构建文件。 在这种情况下,您可能只想更新bootstrap-sass依赖项,它可能只是为您开始工作!
假设您正在引用并配置了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";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.