ruby-on-rails - Bootstrap Sass Rails 4 自定义样式

Question

我正在尝试使用可用的 Bootstrap 更少的变量 自定义我的 Rails 应用程序的样式 here. 我正在使用 bootstrap Sass我在我的 /vendor/assets 中包含了所有 javascript css 和字体。

我关注了Erik Minkel逐字逐句的教程还是我应该说代码的代码。

在 assets/javascript/application.js

//= require jquery
//= require jquery.countdown
//= require bootstrap
//= require jquery_ujs
//= require tinymce-jquery
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require_tree .

并且在assets/stylesheets/application.css

    *= require_tree .
     *= require 'masonry/transitions'
     *= require jquery.countdown
     *= require bootstrap
     *= require_self
     */

为了自定义，我在 assets/stylesheet/ 中创建了一个 bootstrap_and_customization.css.scss 文件，如下所示:

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

    $body-bg:                                                   #ecf0f1;
    $font-family-sans-serif:                'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    $navbar-height:                                        45px;
    $navbar-default-bg:                          white;
    $navbar-default-brand-color:      black;
    $brand-primary:                                    #c0392b;
    $jumbotron-bg:                                         white;
    $link-color: #e74c3c;
    @import 'bootstrap';

当我没有将 Bootstrap Assets 放入我的供应商文件夹时，上面的代码工作正常。在我包含它们之后，这些样式停止工作。

问题是这些样式在我的应用程序中都不起作用，我不知道出了什么问题。

Answer 1

Bootstrap 在其样式中不使用任何变量。它使用带值的普通样式，例如:

.col-md-12{width: 100%;} // it's a value, in this case 100% and not some variable

如果你想使用你定义的变量，你需要在你想使用它们的文件中导入你的变量文件。 假设您有一个名为 custom.css.scss 的文件，您想要在其中使用您的变量，那么您需要执行以下操作:

@import "bootstrap_and_customization";

.some_class{font-family: $font-family-sans-serif;}

I want to use these global variable across my whole app

您可以做一个新文件，而不是在单个文件中要求它，让我们说 style.css.scss 并在那里导入所有样式表文件，例如:

@import "bootstrap_and_customization";
@import "file1";
@import "file2";

这将允许您在 file1.css.scss 和 file2.css.scss 中使用变量 然后您可以在 application.css 中要求 style.css.scss(您也你必须删除 require_tree，因为你在 style.css.scss 中单独需要每个文件) 或者你也可以将 application.css 更改为 application.css.scss 并做同样的事情