web-dev-qa-db-fra.com

CSS ne se charge pas dans l'application

CSS ne se charge pas dans mon application Rails. C'est le fichier index.html.erb situé dans 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 %>

Ensuite, j'ai le fichier application.html.erb situé dans vue/mises en page. Ce fichier devrait lier le css au html.

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

<%= yield %>

</body>
</html>

Mon fichier css products.css.scss situé dans actifs/feuilles de style se présente comme suit: 

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

Et enfin, mon fichier application.css ressemble à ceci:

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

Tout me semble bien et, si je comprends bien, application.css rassemble tous les autres fichiers css afin que vous n'ayez pas à les lier manuellement. Ai-je raison?

Voici également le journal du serveur lorsque je charge la 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)

Pourquoi mon application ne montre pas de CSS?

ruby-on-railscssruby-on-rails-3asset-pipelineassets
31
Jamie

Avez-vous cela dans votre ProductsController, ou si vous êtes absent, ApplicationController?

layout "application"

Vous avez un code de pipeline pré-actif <%= stylesheet_link_tag :all %> quelque part, qui inclut normalement toutes les feuilles de style dans /public/stylesheets, mais il indique au pipeline de ressources de rechercher un fichier nommé all.css.

Puisque <%= stylesheet_link_tag :all %> n'est clairement pas dans votre mise en page application.html.erb, une autre mise en page est en cours de rendu. Cherchez-le et/ou assurez-vous que vos contrôleurs appellent la disposition correcte.

24
Substantial

Exécutez rake assets:precompile pour compiler et copier votre css de/assets vers/public (Rails 3.1+)

9
Michael Durrant

Mon cas corrige une erreur dans ma feuille de style et je cours:

$ Rails_ENV=development rake assets:clean

a résolu le problème. 

Exécuter la commande ci-dessus supprime vos fichiers CSS générés et force Rails à régénérer la sortie CSS de vos fichiers Sass ou SCSS.

7
ruby_object

Je suis tombé sur le même problème en suivant le livre Agile Web Development with Rails. J'ai essayé toutes les solutions recommandées mais en vain. 

Voici ce qui a fonctionné pour moi:

Dans le fichier 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>

Le point culminant est la partie importante.

Trouvez la solution ici: http://pragprog.com/titles/Rails4/errata , où il est écrit: 

Sam Ruby dit: http://pragprog.com/titles/Rails4/source_code .

J'espère que ça aide toujours.

Alex

3
Alex D

Vous voudrez peut-être changer la balise de lien de votre feuille de style. Je vois que vous utilisez actuellement

<%= stylesheet_link_tag  "application" %>

Une application Rails nouvellement générée doit comporter les deux balises de lien suivantes, qui incluront automatiquement toutes les feuilles de style et le javascript:

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

Mais il me semble que vous suivez le "Manuel de développement Web agile avec Rails Book". Dans ce cas, vous souhaiterez peut-être utiliser les éléments suivants:

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

J'espère que je pourrai vous aider, ainsi qu'aux futurs lecteurs du livre Agile Web Development with Rails qui passe en revue l'exemple d'application de dépôt.

3
AndrewPK

Faire du contrôleur un enfant d'ApplicationController

Pour connecter votre contrôleur (et ses vues) au pipeline, assurez-vous que votre contrôleur est un enfant de ApplicationController.

class ProductsController < ApplicationController
  # all your code
end

Lien vers votre fichier css racine

Assurez-vous également que votre application.html.erb a cette ligne:

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

Cela ajoute le fichier de base application.css à vos vues.

Ajouter tous les fichiers css via votre fichier racine

Enfin, assurez-vous que votre application.css a cette ligne:

*= require_tree .

Si tous sont en place, chaque fichier dans app/assets/stylesheets/ sera inclus dans le pipeline css.

2
Mirror318

eh bien, modifiez le fichier app/views/layouts/application.html.erb qui peut fonctionner.

J'espère que cela vous aidera!

2
koly

Je viens de le faire fonctionner. J'ai dû placer le fichier depot.css dans app/views/assets/stylesheets (PAS le répertoire public, comme il est dit dans le livre), et j'ai changé le lien de feuille de style dans application.html.erb pour ressembler à ceci:

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

<%= yield %>

</body>
</html>
2
scientiffic

Cela pourrait aider quelqu'un à regarder cela. J'ai eu le même problème. Dans mon cas, css spécifié était remplacé par d'autres propriétés de fichiers css.

Essayez d’ajouter cette ligne à votre application.html.erb.

<%= stylesheet_link_tag params[:controller] %>
1
priyankvex

Changer index.html.erb

<table class="products">
1
Vladimir Milanovic

Il semble que vous obteniez ce code dans le livre "Développement Web Agile avec Rails" . Dans ce cas, une ligne est peut-être incorrecte dans app/views/layouts/application.html.erb: 

<body>

à

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

Au moins ça marche pour moi.

1
Putnik

Si vous avez compilé vos actifs une fois sur votre ordinateur local pour les déployer, ils seront alors tentés de les utiliser. Vous pouvez utiliser rake assets:precompile pour mettre à jour. Ou vous pouvez aller dans votre dossier tmp (à la racine de l'application Rails) et supprimer tout ce qui se trouve dans cache/assets et cache/sass. Ensuite, vous pouvez accéder à/public/assets et tout supprimer avec un hachage (les chaînes aléatoires). Puis redémarrez le serveur. C'est ce qui a fonctionné pour moi.

1
Travis Pessetto

Extrait du livre: Développement Web agile avec Rails 4

à la page 72. 

Vous trouverez une petite flèche à côté de la balise dans le graphique. 

Avec cette modification, nous allons inclure le nom du contrôleur dans le <body class=""> afin que le nom de la classe change en fonction du contrôleur.

Dans votre fichier SCSS. "products.css.scss" commence par dénommer "CSS CLASS" pour les produits. Dans notre cas, il s’agit de produits contenant un certain nombre de styles imbriqués.

Une petite modification qui empêche fondamentalement l'application de la classe .products au corps, ce qui empêche également le reste d'être stylé. 

1
daveferrara1

J'ai rencontré le même problème, mais j'ai réussi à faire fonctionner mes css ... Je viens de remplacer toutes les chaînes simples citées par des guillemets doubles dans le fichier index.html.erb . J'utilise Rails 3.2.6

1
Farzia

dans votre fichier 'layout.html.erb', le pipeline d'actifs récupère le fichier application.css uniquement comme vous pouvez le lire dans votre fichier application.html.erb. 

J'essayais d'ajouter la ligne '@import "products"' dans le fichier application.css . J'avais le même problème et je pouvais le résoudre de cette façon (avec Rails 4.1 cependant).

1
Andrea.cabral

J'avais le même problème avec Rails 3.2.0 avec Ruby-2.0.0-p247. J'ai essayé chaque suggestion dans ce fil. Je ne sais pas pourquoi, mais le passage à Rails 3.2.12 a résolu le problème. 

0
root

Il est tard et peut-être ai-je raté quelque chose, que voulez-vous dire par "CSS ne se chargera pas dans l'application Rails"? Si vous affichez le code source de la page dans votre navigateur, voyez-vous les éléments de lien de la feuille de style de votre application? Votre table est-elle stylée comme étant aspectée?

D'après ce que je vois dans le journal du serveur:

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

Votre application utilise les fichiers CSS.

BTW, comme vous l'avez dit le fichier application.css "charge" les autres fichiers CSS, cela se fait à l'aide de require_tree.

0
Aldo 'xoen' Giambelluca