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

【问题标题】：Not found bootstrap.css when using twitter-bootstrap-rails gem [Rails3]使用 twitter-bootstrap-rails gem [Rails3] 时未找到 bootstrap.css
【发布时间】：2013-01-21 16:26:05
【问题描述】：

我想在 twitter-bootstrap-rails gem 中使用 less，但我收到“无法加载 /assets/bootstrap.css”和“无法加载 /assets/bootstrap-responsive.css”错误（safari web 检查器）。有什么想法吗？

这是我的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>

【问题讨论】：

标签： ruby-on-rails less twitter-bootstrap-rails

【解决方案1】：

你必须运行命令

rake assets:precompile

所以CSS 文件被复制到公用文件夹中。尝试一下，否则可能是您没有将 CSS 添加到 HTML 中。

【讨论】：

感谢您的快速回复。我已经预编译了资产，但 public/twitter/bootstrap 文件夹中没有 css 文件。只有字形文件
我运行了这个，但我仍然没有 bootstrap.css

【解决方案2】：

我建议您在 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获取更多信息。

【讨论】：

你把视图放在哪里了？如果您想尝试 gem 是否有效，请生成一个虚拟脚手架 (rails g scaffold Project name content:text)。然后去 localhost:3000/projects 。

【解决方案3】：

我终于找到了！我忘了删除这些行

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

来自我的 application.html.erb

【讨论】：