Bootstrap Sass Rails 4自定义样式
我正在尝试使用bootstrap定制我的rails应用程序的样式。 此处提供较少的变量 。 我正在使用引导程序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资产放入我的vendor文件夹时，上面的代码工作正常。 在我加入它们之后，这些样式停止了工作。
问题是这些样式都没有在我的应用程序中工作，我无法弄清楚出了什么问题。
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并执行相同的操作