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

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

@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资产放入我的vendor文件夹时，上面的代码工作正常。在我加入它们之后，这些样式停止了工作。

问题是这些样式都没有在我的应用程序中运行，我无法弄清楚出了什么问题。

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;}

我想在整个应用程序中使用这些全局变量

而不是在单个文件中要求它可以做一个新文件，比如说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并做同样的事情

Bootstrap Sass Rails 4自定义样式

1 个答案: