Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS is not loading in app
    text
    copied!<p>CSS won't load in my rails app. This is index.html.erb file located in view/products:</p> <pre><code> &lt;h1&gt;Listing products&lt;/h1&gt; &lt;table&gt; &lt;% @products.each do |product| %&gt; &lt;tr class="&lt;%= cycle('list_line_odd', 'list_line_even') %&gt;"&gt; &lt;td&gt; &lt;%= image_tag(product.image_url, :class=&gt; 'list_image') %&gt; &lt;/td&gt; &lt;td class="list_description"&gt; &lt;dl&gt; &lt;dt&gt;&lt;%= product.title %&gt;&lt;/dt&gt; &lt;dd&gt;&lt;%= truncate(strip_tags(product.description), :length=&gt; 80) %&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/td&gt; &lt;td class="list_actions"&gt; &lt;%= link_to 'Show', product %&gt;&lt;br/&gt; &lt;%= link_to 'Edit', edit_product_path(product) %&gt;&lt;br/&gt; &lt;%= link_to 'Destroy', product, :confirm=&gt; 'Are you sure?', :method=&gt; :delete %&gt; &lt;/td&gt; &lt;/tr&gt; &lt;% end %&gt; &lt;/table&gt; &lt;br /&gt; &lt;%= link_to 'New product', new_product_path %&gt; </code></pre> <p>Then I have the application.html.erb file located in view/layouts. This file should link the css to html.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Depot&lt;/title&gt; &lt;%= stylesheet_link_tag "application" %&gt; &lt;%= javascript_include_tag "application" %&gt; &lt;%= csrf_meta_tags %&gt; &lt;/head&gt; &lt;body&gt; &lt;%= yield %&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>My css file products.css.scss located in assets/stylesheets looks like this: </p> <pre><code>.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; } } </code></pre> <p>And finally my my application.css file looks like this:</p> <pre><code>/* * 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 . */ </code></pre> <p>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?</p> <p>Also here is the server log when I load the page:</p> <pre><code>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) </code></pre> <p>Why is my app not showing any CSS?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload