与 Rails 4 的引导集成 gem答案

【问题标题】：Bootstrap Integration gem with Rails 4与 Rails 4 的引导集成 gem
【发布时间】：2013-08-15 14:52:41
【问题描述】：

我最近参加了一个黑客马拉松，我们在 Rails 中制作了一个 Web 应用程序。我们都是 Rails 新手，不知道 bootstrap gem，因此我们在 assets 文件夹中硬编码了 bootstrap 样式表。

为了进一步学习 Rails，我将继续使用该应用程序。我已删除 .css 文件，并将 gem 添加到我的 Gemfile 中。我已经运行了 bundle install 并在另一个 CSS 文件中使用“@import”命令导入了文件。

当我运行 rails 服务器并导航到我的主页时，我收到一个错误：

    Sass::SyntaxError in Pages#rootpage

Showing C:/Users/User/Documents/SoapBox/app/views/layouts/application.html.erb where line #6 raised:

File to import not found or unreadable: bootstrap.

Load paths:
  C:/Users/Soham/Documents/SoapBox/app/assets/images
  C:/Users/Soham/Documents/SoapBox/app/assets/javascripts
  C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets
  C:/Users/Soham/Documents/SoapBox/vendor/assets/javascripts
  C:/Users/Soham/Documents/SoapBox/vendor/assets/stylesheets
  C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/turbolinks-1.3.0/lib/assets/javascripts
  C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/jquery-rails-3.0.4/vendor/assets/javascripts
  (in C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets/styles.css.scss:2)
`File to import not found or unreadable: bootstrap`.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Oswald:700,300' rel='stylesheet' type='text/css'>
<%= favicon_link_tag "favicon.png", :type => "image/png", :rel => "icon" %>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>

我不明白为什么会发生错误。

任何帮助将不胜感激！

谢谢！

苏哈姆克

【问题讨论】：

安装gem后是否重启了服务器？
是的，多次。 @vinodadhikary
你能显示styles.css.scss的相关部分吗，因为就像你说的@import "bootstrap"应该可以正常工作。
目前，styles.css.scss 只包含两个导入命令——一个用于引导，另一个用于引导响应。 @vinodadhikary
你用的是哪个 gem？

标签： ruby-on-rails gem twitter-bootstrap-rails hardcoded

【解决方案1】：

我推荐看这个：RailsCast

它提到像这样安装引导程序：

#commandline
rails g bootstrap:install

如果之后它不起作用，请尝试将其添加到您的 less 文件中。

#css NOT scss   
@import "twitter/bootstrap/bootstrap";

请记住，这颗宝石少了。将较少的文件导入您的 scss 文件会中断。

【讨论】：

【解决方案2】：

更新：由于您已经在使用 bootstrap-sass，它应该没有任何问题。你能粘贴你的styles.css.scss的内容吗

原文：如果你想将它导入自定义样式表，你可能需要 bootstrap-sass 而不是 bootstrap-rails gem。

#Gemfile
group :assets do
  gem 'bootstrap-sass'
end

# app/assets/stylesheets/styles.css.scss
@import 'bootstrap';
@import 'bootstrap/responsive';

如果你想使用bootstrap-rails gem，你需要在application.css中的sprocket里面导入

# Gemfile
group :assets do
  gem 'bootstrap-rails'
end

# app/assets/stylesheets/application.css

/*
*= require bootstrap
*= require bootstrap/responsive
*/

【讨论】：

【解决方案3】：

虽然这不会回答您关于错误的问题，但我更喜欢简单地将引导文件包含在您的“供应商”资产文件夹中（在该文件夹中，通常的做法是将您未编码的任何内容（如 JQuery）放入其中）。

我更喜欢这个，因为当 Twitter-Bootstrap 有更新时，删除文件要简单得多。此外，在您使用的任何编辑器中查看您的 CSS 文件会更好。

【讨论】：

我认为人们通常使用bootstrap-sass，因为sass 部分。因此，您可以在样式表等中使用 boostrap 的 mixins 和变量。

【解决方案4】：

将扩展名.scss 添加到application.css。如果您删除了它，请重新添加它。

应该是这样的：

#application.css.scss
/*
 *
 *= require_self
 *= require_tree .
*/

@import "bootstrap";

...

在.scss 文件中使用该导入非常重要。否则将无法正常工作。

有意义吗？

【讨论】：