Bootstrap Sass Rails 4自定义样式 [英] Bootstrap Sass Rails 4 customize styling

问题描述

我正在尝试使用引导程序更少的变量自定义我的Rails应用程序的样式此处。
我正在使用 bootstrap Sass ，并且包含了所有的JavaScript CSS和字体在我的 /供应商/资产中。

I'm trying to customize the styling of my rails app with bootstrap Less variables available here. I am using the bootstrap Sass and I included all javascript css and fonts in my /vendor/assets.

我关注了 Erik Minkel 教程一字不漏，还是我应该说一下代码。

I followed Erik Minkel tutorial word for word or should I say code for code.

在 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 .

在资产/样式表/application.css

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

对于自定义，我在<$中创建了 bootstrap_and_customization.css.scss 文件c $ c>资产/样式表/ 看起来像这样：

For the customization I created a bootstrap_and_customization.css.scss file in assets/stylesheet/ which looks like this:

@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';

当我没有在供应商文件夹中放入引导资产时，上面的代码运行良好。在我加入它们之后，这些样式停止了工作。

The code above worked fine when I didn't have the bootstrap assets into my vendor folder. After I included them, these styling stopped working.

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

The problem is that none of these styling work in my app and I can't figured out what's going wrong.

推荐答案

引导程序不使用其样式中的任何变量。它使用带有值的普通样式，例如：

Bootstrap doesn't use any variables in its style. It uses normal styles with values, like:

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

如果您要使用已定义的变量，您需要将变量文件导入要使用它们的文件中。 让我们说您有一个名为custom.css.scss的文件，您想在其中使用变量，然后需要执行以下操作：

If you want to use the variables which you have defined, you need to import your variable file in files where you want to use them. Lets say you have a file named custom.css.scss where you want to use your variables then you need to do:

@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，然后在其中导入所有样式表文件，例如：

Instead of requiring it in individual files what you can do is make a new file, lets say style.css.scss and import all of your stylesheet files there, something like:

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

This will allow you to use variables inside file1.css.scss and file2.css.scss and then you can require style.css.scss inside application.css(also you'll have to remove require_tree since you are requiring each file individually inside style.css.scss) or you can also change application.css to application.css.scss and do the same thing

这篇关于Bootstrap Sass Rails 4自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！