使用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]

回答

相關問題