我无法在 rails 应用程序中修改 bootstrap-sass 变量

Question

我正在使用主题 grasyscale-sass，主要是在项目的一个链接中，所有它都工作正常，其他链接使用它自己的 SCSS 文件。在这个 scss 文件中，我想将某些 bootstrap 变量更改为 navbar-default-bg 等，但要包含两个 scss 文件（application.scss 和我的 custom.scss 文件） stylesheet_link_tag 在文件 application.html.erb 中我无法获得我在 custom.scss 中对这些变量所做的更改，我认为默认值始终适用，但是正常代码 CSS 已被修改。

知道我哪里做错了吗？还是我想做点什么 "forbidden"?

提前致谢。

/**************/

这里是application.html.erb文件以及两个scss文件是如何包含的，都在assets/stylesheets

<%= stylesheet_link_tag   'application', 'custom', media: 'all', 'data-turbolinks-track' => true %>

custom.scss 文件

$link-color: #cb2027;
$brand-primary: #cb2027; 
$body-bg: #e9e9e9;  
$navbar-default-brand-color: #cb2027;
$navbar-default-bg:#ffffff;  /* Navbar default */
$navbar-height: 30px;

$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;

i{
  color: #337ab7;
}

a{
  color: #cb2027;
}

@import "bootstrap";
@import "bootstrap-sprockets";

.center {
  text-align: center;
 }

.navbar-brand{
  font-size: 2em;
  font-weight: bold;
}
...

和application.js文件，包含在assets/javascripts

中

//
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.easing
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
// require.js
//= require grayscale
//= require masonry/jquery.masonry
// require_tree .

Answer 1

Import Bootstrap styles in app/assets/stylesheets/application.scss

@import "bootstrap"; 和 @import "bootstrap-sprockets"; 与任何其他样式表一起进入 application.scss。

无需深入探讨如何 can/should 为样式表、variables/mixins 等设置目录。您的变量需要在 application.scss 中的 bootstrap 和您的其他自定义项之前之后：

由于您使用的主题已准备好使用变量来自定义基本 bootstrap 样式，因此您必须更改那些灰度变量 and/or 样式才能将它们更改为你想要什么。

*在这个例子中 _variables = grayscale_variables 从主题和 main.scss 基本上是 application.scss.

application.scss

@import "grayscale_variables";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "_grayscale";
@import "style";

grayscale_variables.scss

$grayscale-primary: #cb2027;
$grayscale-dark: #e9e9e9;
$grayscale-light: #cb2027;

$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;

$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;

（*并且只应使用一个 bootstrap js）参见 bootstrap-sass bootstrap-sprockets 和 bootstrap 不应同时包含在application.js

Answer 2

我的application.scss，但是有些变量还没有实现，比如$body-bg, $navbar-default-bg等等，我想用main.css 灰度-sass 主题。

我也试过改变一些@import的顺序

$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9; 
$body-bg: #fff;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg: #f8f8f8; 
$navbar-height: 30px;

$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;

@import 'masonry/transitions';
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'custom';
@import '../../../grayscale-sass/asset/sass/main.scss';

我无法在 rails 应用程序中修改 bootstrap-sass 变量

I can't modify bootstrap-sass variables in rails application

ruby-on-rails

twitter-bootstrap

bootstrap-sass