使用twitter-bootstrap-rails时未找到bootstrap.css gem [Rails3]

我想使用twitter-bootstrap-rails gem，但收到“Failed to load /assets/bootstrap.css”和“Failed加载/assets/bootstrap-responsive.css“错误（safari web inspector）。有任何想法吗？使用twitter-bootstrap-rails时未找到bootstrap.css gem [Rails3]

这里是我的的Gemfile：

source 'https://rubygems.org' 

gem 'rails', '3.2.8' 

gem 'devise' 
gem 'cancan' 
gem 'rolify' 
gem 'roo' 
gem 'kaminari' 
gem 'activeadmin' 
gem 'less-rails' 

group :assets do 
    gem 'coffee-rails' 
    gem 'therubyracer', :platforms => :ruby 
    gem 'jquery-ui-rails' 
    gem 'angularjs-rails' 
    gem 'angular-ui-rails' 
    gem 'uglifier' 

    gem 'slim' 

    gem 'sass-rails' 

    gem 'twitter-bootstrap-rails' 
    gem 'bootstrap-timepicker-rails' 
end 

gem 'jquery-rails' 
gem 'rabl' 
gem 'yajl-ruby' 

group :production do 
    gem 'sqlite3' 
end 

group :development, :test do 
    gem 'sqlite3' 
    gem "capistrano" 
    gem "rvm-capistrano" 
    gem 'ruby-prof' 
end

这里是我的bootstrap_and_overrides.css.less文件：

@import "twitter/bootstrap/bootstrap"; 
@import "twitter/bootstrap/responsive"; 

// Set the correct sprite paths 
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings"); 
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white"); 

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines) 
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not 
//  have the proper paths. So for now we use the absolute path. 
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot"); 
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix"); 
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff"); 
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf"); 
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg"); 

// Font Awesome 
@import "fontawesome"; 

// Glyphicons 
@import "twitter/bootstrap/sprites.less"; 

// Your custom LESS stylesheets goes here 
// 
// Since bootstrap was imported above you have access to its mixins which 
// you may use and inherit here 
// 
// If you'd like to override bootstrap's own variables, you can do so here as well 
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation 
// 
// Example: 
// @linkColor: #ff0000; 

.icon-pressed { 
    .icon-white; 
    .label; 
    width: auto 
} 

table > thead th { 
    white-space: nowrap; 
    vertical-align: 50% !important; 
    font-weight: normal !important; 
    cursor: pointer; 
}

这里是我的application.css：

/* 
* 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 bootstrap_and_overrides 
*= require jquery.ui.all 
*= require daterangepicker 
*= require bootstrap-timepicker 
*= require angular-ui 
*= require_tree . 
*/ 
body { padding-top: 50px; } 
footer { margin-top: 200px; }

这是我的看法：

<!DOCTYPE html> 
<form class="form-search"> 
    <input type="text" class="input-medium search-query"> 
    <button type="submit" class="btn">Search</button> 
</form>

来源

2013-01-21 user1997649

您必须运行命令

rake assets:precompile

所以CSS文件被复制到公用文件夹。试试看，否则可能是因为你没有将CSS添加到HTML中。

来源

2013-01-21 16:32:28

让我知道如何继续下去 –

感谢的快速反应。我已经预编译了资源，但public/twitter/bootstrap文件夹中没有css文件。只有glyphicons文件 – user1997649

我只是想了解为什么宝石不工作... – user1997649

我建议你只是为你的application.css清单文件添加一个新的插入。您应该添加：

*= require bootstrap 
*= require bootstrap-responsive

*=require self之后的声明。我认为这是安装gem twitter-bootstrap-rails的一部分，这意味着你错过了rails g bootstrap:install。

错误消息是由您的bootstrap_and_overrides.css.less file（@import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/responsive"; ）顶部的错误包含产生的。你应该删除它们。

您可能会考虑从this RialsCast获取更多信息。

来源

2013-01-21 16:44:39

没有为我工作 – user1997649

你在哪里放置视图？如果你想尝试如果宝石工作，产生一个虚拟脚手架（'rails g scaffold Project name content：text'）。然后去localhost：3000/projects。 –

我终于找到它了！我忘了从我application.html.erb删除这些行

<%= stylesheet_link_tag "bootstrap" %> 
<%= stylesheet_link_tag "bootstrap-responsive" %>

来源

2013-01-24 18:08:03 user1997649

使用twitter-bootstrap-rails时未找到bootstrap.css gem [Rails3]

回答

相关问题