CSS is not loading in app

2019-01-23 11:27发布

站内文章 / HTML/CSS

18 0

狗以群分

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 %>

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>

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;
  }
}

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 . 
 */

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)

Why is my app not showing any CSS?

回答1:

Do you have this in your ProductsController, or if absent, ApplicationController?

layout "application"

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.

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.

回答2:

Run rake assets:precompile to compile and copy your css from /assets to /public (rails 3.1+)

回答3:

I my case fixing an error in my style sheet and running:

$ RAILS_ENV=development rake assets:clean

has fixed the problem.

Running above command deletes your generated CSS files and forces rails to regenerate the CSS output from your Sass or SCSS files.

回答4:

You might want to change your stylesheet link tag. I see you're currently using

<%= stylesheet_link_tag  "application" %>

A freshly generated rails app should have the following two link tags which will automatically include all stylesheets and javascript:

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

But it seems to me that you're going along with the 'Agile Web Development with Rails Book', in which case, you might want to use the following:

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

I hope I could be of help to you, and to future readers of the Agile Web Development with Rails book who are going through the depot application example.

回答5:

I stumbled upon the same problem while following the Agile Web Development with Rails book. Tried all the recommended solutions but to no avail.

Here's what worked for me:

In the aplication.html.erb file:

<!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>

The highlight is the important part.

Found the solution here: http://pragprog.com/titles/rails4/errata, where it says:

Sam Ruby says: http://pragprog.com/titles/rails4/source_code.

Hope it still helps.

Alex

回答6:

well, modify the app/views/layouts/application.html.erb may work change the "stylesheet_link_tag "application"" to "stylesheet_link_tag "depot"".

I wish it will help you!

回答7:

Just got it to work. I had to place the depot.css file in app/views/assets/stylesheets (NOT the public directory, as it said in the book), and I changed the stylesheet link in application.html.erb to look like this:

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

<%= yield %>

</body>
</html>

回答8:

Make controller a child of ApplicationController

To hook up your controller (and its views) to the pipeline, make sure your controller is a child of ApplicationController.

class ProductsController < ApplicationController
  # all your code
end

Link to your root css file

Also make sure your application.html.erb has this line:

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

This adds the core application.css file to your views.

Add all css files through your root file

Finally make sure your application.css has this line:

*= require_tree .

If all those are in place, every file in app/assets/stylesheets/ will be included in the css pipeline.

回答9:

Change index.html.erb

<table class="products">

回答10:

It looks like you get this code from "Agile Web Development with Rails" book. In this case perhaps one line is incorrect in app/views/layouts/application.html.erb: change

<body>

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

At least it works for me.

回答11:

I faced the same problem, but I got my css to work... I just changed all the single quoted strings to double quotes in the index.html.erb file. There is no need to change anything. I'm using rails 3.2.6

回答12:

If you've compiled your assets once on your local machine to deploy it will make it so it will try to use those. You can use rake assets:precompile to update. Or you can go into your tmp folder (in the root of the rails app) and delete everything in cache/assets and cache/sass. Then after that you can go into /public/assets and delete everything with a hash after it (the random strings). Then restart the server. That is what worked for me.

回答13:

From the book: Agile Web Development with Rails 4

on ~Page 72.

You'll find a small arrow next to the tag in the graphic.

With this change we are going to include the controller name in the <body class=""> so that the class name changes based on the controller.

In your SCSS file. "products.css.scss" is starting with styling the "CSS CLASS" for products. In our case it is .products with a bunch of styles nested inside it.

A small change that basically prevents the .products class from being applied to the body, which in turn prevents the rest from being styled as well.

回答14:

in your file 'layout.html.erb', the asset pipeline is getting the application.css only as you can read on your file application.html.erb.

I would try to add the line '@import "products"' in that application.css file. Had the same issue and was able to fix it that way (using rails 4.1 though).

回答15:

This might help someone looking this up. I had the similar issue. In my case css specified was being overridden by other css files properties.

Try adding this line to your application.html.erb.

<%= stylesheet_link_tag params[:controller] %>

回答16:

It's late and maybe I missed something, what do you mean for "CSS won't load in my rails app"? If you view the page source code in your browser do you see the stylesheet link elements of your application? Is your table styled as aspected?

From what I see in the server log:

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

Your application is using the CSS files.

BTW, as you said the application.css "load" the other CSS files, this is done using require_tree.

回答17:

I was having this same issue with Rails 3.2.0 with ruby-2.0.0-p247. I tried every suggestion in this thread. I have no idea why, but switching to Rails 3.2.12 fixed it.

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