Bootstrap Sass Rails 4 自定义样式

Question

Bootstrap Sass Rails 4 自定义样式

ruby-on-railstwitter-bootstrapbootstrap-sass

3

我正在尝试使用Bootstrap的Less变量来自定义我的Rails应用程序的样式，这些变量可以在此处找到。我正在使用Bootstrap Sass，并将所有JavaScript、CSS和字体文件都包含在/vendor/assets中。

我逐字遵循了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资源文件放到我的vendor文件夹里面时可以正常工作。但是在我包含它们之后，这些样式就停止起作用了。

问题是这些样式都不在我的应用程序中起作用，而我无法确定出现了什么问题。

- Cyzanfar

你需要在想要使用这些变量的文件中导入它们。 - Mandeep

你在说哪个文件？我只有一个 css.scss 文件，那就是我为自定义创建的 bootstrap_and_customization.css.scss。 - Cyzanfar

你没有使用变量来进行样式设计吗？例如：.class_name{background: $body-bg;} - Mandeep

你说的是“在想要使用这些变量的文件中导入它们”。我想在整个应用程序中使用这些全局变量。 - Cyzanfar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mandeep · Accepted Answer

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并执行相同的操作。