Bootstrap Sass with Rails 4 [英] Bootstrap Sass with Rails 4

问题描述

我试图在我的rails（4.0.0）项目中使用bootstrap-sass（3.1.0.2）和sass-rails（4.0.1）。

I'm trying to use bootstrap-sass (3.1.0.2) and sass-rails (4.0.1) in my rails (4.0.0) project.

我的application.css.scss文件看起来像这样：

My application.css.scss file looks like this:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
*= require_self
*= require font-awesome
*= require_tree .
*/ 

我的bootstrap_and_overrides.css.scss文件位于stylesheets文件夹中， this：

My bootstrap_and_overrides.css.scss file is in the stylesheets folder and looks like this:

@import "bootstrap";

我有一个测试页设置，试试：

I have a test page set up to try it out with this:

    <div class="container">
<h2>test terms</h2>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="bg-primary">.dfd..</p>
<p class="bg-success">..sdfas.</p>
<p class="bg-info">..sdfs.</p>
<p class="bg-warning">.asdf..</p>
<p class="bg-danger">.adf..</p>
<p>test terms</p>


<button type="button" class="btn btn-primary">Default</button>

</div>
<button type="button" class="btn btn-info">Info</button>

当我启动服务器并访问该页面时，它以纯文本呈现而没有引导样式。

When I start the server and visit the page, it renders in plain text without the bootstrap styling.

任何想法如何做都不胜感激。看来几个人在这里不使用宝石。这种方法有理由吗？非常感谢！

Any ideas on what to do would be appreciated. It seems a few people on here don't use the gems. Is there a reason for this approach? Thanks very much!

推荐答案

我几天前遇到了同样的问题。我的配置是相同的，但只有几个造型效果的Bootstrap不工作（特别是bg-无论什么颜色）。后几个宝石更新的问题消失。

I faced nearly the same problem few days ago. My configuration was quite the same but only few styling effects of Bootstrap were not working (especially the bg-whatever-color). After few gems updated the problem disappear.

我更新的一些宝石

gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'

不要忘记：

bundle update

给你一个想法

*= require jquery.ui.all
*= require select2
*= require font-awesome
*/

@import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
@import "bootstrap";

@import "general_layout";
@import "header";
@import "footer";
@import "menus";
@import "pagination";
@import 'login';
@import "error";

希望它有帮助！

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