CSS未在应用中加载

时间：2011-12-07 21:02:43

标签： ruby-on-rails css ruby-on-rails-3 asset-pipeline assets

CSS不会加载到我的rails应用程序中。这是位于view / products中的index.html.erb文件：

 <h1>Listing products</h1>

<table>
<% @products.each do |product| %>
  <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

  <td>
    <%= image_tag(product.image_url, :class=> 'list_image') %>
  </td>

  <td class="list_description"> 
    <dl>
      <dt><%= product.title %></dt>
      <dd><%= truncate(strip_tags(product.description), :length=> 80) %></dd>
    </dl>
  </td>

  <td class="list_actions">
    <%= link_to 'Show', product %><br/>
    <%= link_to 'Edit', edit_product_path(product) %><br/>
    <%= link_to 'Destroy', product, 
              :confirm=> 'Are you sure?',
              :method=> :delete %>
  </td>
</tr>
<% end %>
</table>

<br />

<%= link_to 'New product', new_product_path %>

然后我将application.html.erb文件放在view / layouts中。此文件应将css链接到html。

<!DOCTYPE html> 
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag  "application" %>
  <%= javascript_include_tag  "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

位于资产/样式表中的我的css文件products.css.scss如下所示：

.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

 .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }

  .list_actions {
     font-size:    x-small;
     text-align:   right;
     padding-left: 1em;
  }

  .list_line_even {
    background-color:   #e0f8f8;
  }

  .list_line_odd {
    background-color:   #f8b0f8;
  }
}

最后我的application.css文件如下所示：

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. 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_tree . 
 */

一切看起来都不错，因为我理解application.css收集所有其他css文件，所以你不必手动链接它们。我是对的吗？

此处是加载页面时的服务器日志：

Started GET "/products" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
  Processing by ProductsController#index as HTML
  Product Load (0.1ms)  SELECT "products".* FROM "products" 
 Rendered products/index.html.erb within layouts/application (7.4ms)
 Completed 200 OK in 26ms (Views: 24.2ms | ActiveRecord: 0.4ms)


 Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /scaffolds.css - 304 Not Modified (0ms)


 Started GET "/assets/all.css" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /all.css - 404 Not Found (4ms)

 ActionController::RoutingError (No route matches [GET] "/assets/all.css"):


 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-                           3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.5ms)


 Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /products.css - 304 Not Modified (0ms)


 Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /jquery.js - 304 Not Modified (0ms)


 Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /jquery_ujs.js - 304 Not Modified (0ms)


 Started GET "/assets/products.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /products.js - 304 Not Modified (0ms)


 Started GET "/assets/defaults.js" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /defaults.js - 404 Not Found (3ms)

 ActionController::RoutingError (No route matches [GET] "/assets/defaults.js"):


 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-          3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.9ms)

为什么我的应用没有显示任何CSS？

17 个答案:

答案 0 :(得分：24)

您是否在ProductsController中，或者如果缺席，ApplicationController？

layout "application"

你在某个地方有一个资产前管道<%= stylesheet_link_tag :all %>，它通常包含/public/stylesheets中的所有样式表，但它告诉资产管道要查找名为all.css的文件。

由于<%= stylesheet_link_tag :all %>显然不在您的application.html.erb布局中，因此正在呈现其他一些布局。找它，和/或确保你的控制器调用正确的布局。

答案 1 :(得分：9)

运行rake assets:precompile编译并将您的css从/ assets复制到/ public（rails 3.1 +）

答案 2 :(得分：7)

我的情况是在我的样式表中修复错误并运行：

$ RAILS_ENV=development rake assets:clean

解决了这个问题。

运行上面的命令会删除生成的CSS文件并强制rails重新生成Sass或SCSS文件的CSS输出。

答案 3 :(得分：3)

您可能想要更改样式表链接标记。我看到你正在使用

<%= stylesheet_link_tag  "application" %>

新生成的rails应用应具有以下两个链接标记，这些标记将自动包含所有样式表和javascript：

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>

但在我看来，您正在使用“使用Rails Book进行敏捷Web开发”，在这种情况下，您可能希望使用以下内容：

<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", :media => "all" %>
<%= javascript_include_tag "application" %>

我希望我可以帮助您，以及正在通过软件仓库应用程序示例的Agile Web Development with Rails book的未来读者。

答案 4 :(得分：3)

在遵循Agile Web Development with Rails一书的同时，我偶然发现了同样的问题。尝试了所有推荐的解决方案但无济于事。

这对我有用：

在aplication.html.erb文件中：

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class='<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->

<%= yield %>

</body>
</html>

重点是重要部分。

在此处找到解决方案：http://pragprog.com/titles/rails4/errata，其中包含：

  

Sam Ruby说：http://pragprog.com/titles/rails4/source_code。

希望它仍有帮助。

亚历

答案 5 :(得分：2)

好吧，修改app / views / layouts / application.html.erb可能有效 将“stylesheet_link_tag”应用程序“”更改为“stylesheet_link_tag”depot“”。

我希望它能帮到你！

答案 6 :(得分：2)

使控制器成为ApplicationController的子项

要将控制器（及其视图）连接到管道，请确保您的控制器是ApplicationController的孩子。

class ProductsController < ApplicationController
  # all your code
end

链接到根css文件

另外请确保您的application.html.erb有此行：

<%= stylesheet_link_tag 'application', media: 'all' %>

这会将核心application.css文件添加到您的视图中。

通过根文件添加所有css文件

最后确保您的application.css有这一行：

*= require_tree .

如果所有这些都存在，app/assets/stylesheets/中的每个文件都将包含在css管道中。

答案 7 :(得分：2)

刚开始工作。我必须将depot.css文件放在app/views/assets/stylesheets中（不是公共目录，如书中所述），我更改了application.html.erb中的样式表链接，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag "depot"%>
  <%= javascript_include_tag  :defaults %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

答案 8 :(得分：1)

这可能有助于有人看这个。我有类似的问题。在我的情况下，css指定被其他css文件属性覆盖。

尝试将此行添加到您的application.html.erb。

<%= stylesheet_link_tag params[:controller] %>

答案 9 :(得分：1)

在您的文件＆＃39; layout.html.erb＆＃39;中，资产管道正在获取application.css，因为您可以阅读您的文件application.html.erb。

我会尝试添加一行＆＃39; @import＆＃34;产品＆＃34;＆＃39;在该application.css文件中。 有同样的问题，并能够以这种方式解决它（虽然使用rails 4.1）。

答案 10 :(得分：1)

从书中：使用Rails 4进行敏捷Web开发

on~Page 72.

您会在图片中的标签旁边找到一个小箭头。

通过此更改，我们将在<body class="">中包含控制器名称，以便类名根据控制器而更改。

在您的SCSS文件中。 ＆＃34; products.css.scss＆＃34;首先是设计＆＃34; CSS CLASS＆＃34;对于产品。在我们的例子中，它是嵌套在其中的一堆样式的.products。

一个小的变化，基本上阻止了.products类被应用到body，这反过来又防止了其余的样式。

答案 11 :(得分：1)

如果您在本地计算机上编译了一次资产以进行部署，那么它将会尝试使用它们。您可以使用rake assets:precompile进行更新。或者你可以进入你的tmp文件夹（在rails应用程序的根目录中）并删除缓存/资产和缓存/ sass中的所有内容。然后，您可以进入/ public / assets并删除所有内容后的哈希值（随机字符串）。然后重启服务器。这对我有用。

答案 12 :(得分：1)

我遇到了同样的问题，但我让我的CSS工作......我只是将所有单引号字符串更改为index.html.erb文件中的双引号。 没有必要改变任何东西。我正在使用rails 3.2.6

答案 13 :(得分：1)

看起来你从“Agile Web Development with Rails”一书中获得了这个代码。 在这种情况下，app / views / layouts / application.html.erb中可能有一行不正确： 改变

<body>

到

<body class='<%= controller.controller_name %>'>

至少它对我有用。

答案 14 :(得分：1)

更改index.html.erb 

<table class="products">

答案 15 :(得分：0)

我在使用ruby-2.0.0-p247的Rails 3.2.0时遇到了同样的问题。我尝试了这个帖子中的每个建议。我不明白为什么，但切换到Rails 3.2.12修复它。

答案 16 :(得分：0)

已经很晚了，也许我错过了什么，你是什么意思“CSS不会加载我的rails应用程序”？如果您在浏览器中查看页面源代码，您是否看到应用程序的样式表链接元素？你的桌子风格是否符合预期？

从我在服务器日志中看到的内容：

Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 [...]
Served asset /products.css - 304 Not Modified (0ms)

您的应用程序正在使用CSS文件。

BTW，正如你所说的application.css“加载”其他CSS文件，这是使用require_tree完成的。

相关问题
最新问题