CSS未在应用程序中加载 [英] CSS is not loading in app
问题描述
CSS不会载入我的rails应用程式。这是位于view / products中的index.html.erb文件：
CSS won't load in my rails app. This is index.html.erb file located in view/products:
<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。
Then I have the application.html.erb file located in view/layouts. This file should link the css to 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位于assets / stylesheets如下：
My css file products.css.scss located in assets/stylesheets looks like this:
.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文件看起来像这样：
And finally my my application.css file looks like this:
/*
* 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文件，因此您不必手动链接它们。我是否正确？
Everything looks okay to me and as I understand the application.css gathers up all the other css files so you don't have to link them all manually. Am I correct?
这里是我加载页面时的服务器日志：
Also here is the server log when I load the page:
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 ？
Why is my app not showing any CSS?
推荐答案
您的 ProductsController ， ApplicationController ？
layout "application"
您有一个资产前管道<％= stylesheet_link_tag：all％> 某处，通常包括 / public / stylesheets 中的所有样式表，但它告诉资产管道寻找一个名为 all的文件。 css 。
You've got a pre-asset pipeline <%= stylesheet_link_tag :all %> somewhere, which normally includes all stylesheets in /public/stylesheets, but it's telling asset pipeline to look for a file named all.css.
由于<％= stylesheet_link_tag：all％> 而不是在你的 application.html.erb 布局中，正在渲染一些其他布局。捕捉它，和/或确保你的控制器调用正确的布局。
Since <%= stylesheet_link_tag :all %> is clearly not in your application.html.erb layout, some other layout is being rendered. Hunt it down, and/or ensure your controller(s) are calling the correct layout.
这篇关于CSS未在应用程序中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
