webentwicklung-frage-antwort-db.com.de

CSS wird nicht in App geladen

CSS wird nicht in meine Rails-App geladen. Dies ist die index.html.erb-Datei 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 %>

Dann habe ich die Datei application.html.erb in view/layouts. Diese Datei sollte die CSS mit HTML verbinden.

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

<%= yield %>

</body>
</html>

Meine CSS-Datei products.css.scss in Assets/Stylesheets sieht folgendermaßen aus: 

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

Und schließlich sieht meine meine application.css-Datei so aus:

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

Alles sieht in Ordnung aus und so wie ich es verstanden habe, sammelt die Anwendung alle anderen CSS-Dateien, sodass Sie sie nicht manuell verknüpfen müssen. Hab ich recht?

Hier ist auch das Serverprotokoll, wenn ich die Seite lade:

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)

Warum zeigt meine App kein CSS?

31
Jamie

Haben Sie dies in Ihrer ProductsController oder, falls nicht vorhanden, ApplicationController?

layout "application"

Sie haben irgendwo eine Vor-Asset-Pipeline <%= stylesheet_link_tag :all %>, die normalerweise alle Stylesheets in /public/stylesheets enthält, aber die Asset-Pipeline soll nach einer Datei mit dem Namen all.css suchen.

Da <%= stylesheet_link_tag :all %> eindeutig nicht in Ihrem application.html.erb-Layout enthalten ist, wird ein anderes Layout gerendert. Beseitigen Sie das Problem und/oder stellen Sie sicher, dass Ihre Controller das richtige Layout aufrufen.

24
Substantial

Führen Sie rake assets:precompile aus, um Ihre CSS von/assets nach/public zu kompilieren und zu kopieren (Rails 3.1+).

9
Michael Durrant

Ich habe meinen Fall dabei, einen Fehler in meinem Stylesheet zu beheben und auszuführen:

$ Rails_ENV=development rake assets:clean

hat das Problem behoben. 

Wenn Sie den obigen Befehl ausführen, werden Ihre generierten CSS-Dateien gelöscht und Rails muss die CSS-Ausgabe aus Ihren Sass- oder SCSS-Dateien neu generieren.

7
ruby_object

Ich bin über das gleiche Problem gestolpert, als ich das Buch "Agile Web Development with Rails" verfolgt habe. Ich habe alle empfohlenen Lösungen ausprobiert, aber ohne Erfolg. 

Folgendes hat für mich funktioniert:

In der Datei 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>

Das Highlight ist der wichtige Teil.

Die Lösung hier gefunden: http://pragprog.com/titles/Rails4/errata , wo es heißt: 

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

Hoffe es hilft immer noch.

Alex

3
Alex D

Möglicherweise möchten Sie Ihr Stylesheet-Link-Tag ändern. Ich sehe, du verwendest gerade

<%= stylesheet_link_tag  "application" %>

Eine frisch generierte Rails-App sollte die folgenden zwei Link-Tags haben, die automatisch alle Stylesheets und Javascript enthalten:

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

Mir scheint jedoch, dass Sie mit dem 'Agile Web Development with Rails Book' mitmachen. In diesem Fall möchten Sie vielleicht Folgendes verwenden:

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

Ich hoffe, ich könnte Ihnen und zukünftigen Lesern des Buches Agile Web Development with Rails , die sich mit dem Anwendungsbeispiel für Depots befassen, helfen.

3
AndrewPK

Machen Sie den Controller zu einem Kind von ApplicationController

Um Ihren Controller (und seine Ansichten) an die Pipeline anzuschließen, stellen Sie sicher, dass Ihr Controller ein Kind von ApplicationController ist.

class ProductsController < ApplicationController
  # all your code
end

Verknüpfen Sie mit Ihrer Root-CSS-Datei

Stellen Sie außerdem sicher, dass Ihr application.html.erb diese Zeile hat:

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

Dadurch wird die application.css-Kerndatei zu Ihren Ansichten hinzugefügt.

Fügen Sie alle CSS-Dateien über Ihre Root-Datei hinzu

Vergewissern Sie sich schließlich, dass Ihr application.css diese Zeile hat:

*= require_tree .

Wenn alle diese Dateien vorhanden sind, wird jede Datei in app/assets/stylesheets/ in die CSS-Pipeline aufgenommen.

2
Mirror318

nun, ändern Sie app/views/layouts/application.html.erb Ändern Sie die Anwendung "stylesheet_link_tag" in "stylesheet_link_tag" im Depot.

Ich wünschte es wird dir helfen!

2
koly

Habe es einfach zum Laufen gebracht. Ich musste die depot.css-Datei in app/views/assets/stylesheets (NICHT das öffentliche Verzeichnis, wie es in dem Buch gesagt wurde) ablegen, und ich änderte den Stylesheet-Link in application.html.erb folgendermaßen:

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

Dies könnte jemandem beim Nachschlagen helfen. Ich hatte das ähnliche Problem. In meinem Fall wurde die angegebene css von anderen css-Dateieigenschaften überschrieben.

Versuchen Sie, diese Zeile zu Ihrer Anwendung.html.erb hinzuzufügen.

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

Ändern Sie index.html.erb

<table class="products">
1

Es sieht so aus, als würden Sie diesen Code aus dem Buch "Agile Web Development with Rails" erhalten 

<body>

zu

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

Zumindest funktioniert es bei mir.

1
Putnik

Wenn Sie Ihre Assets einmal auf Ihrem lokalen Computer kompiliert haben, um sie bereitzustellen, versuchen Sie, diese zu verwenden. Sie können rake assets:precompile zum Aktualisieren verwenden. Oder Sie können in den Ordner tmp (im Stammverzeichnis der Rails-App) gehen und alles in Cache/Assets und Cache/Sass löschen. Danach können Sie nach/public/assets gehen und alles mit einem Hash (den zufälligen Strings) löschen. Starten Sie dann den Server neu. Das hat bei mir funktioniert.

1
Travis Pessetto

Aus dem Buch: Agile Webentwicklung mit Rails 4

auf ~ Seite 72. 

In der Grafik befindet sich neben dem Tag ein kleiner Pfeil. 

Mit dieser Änderung fügen wir den Controller-Namen in den <body class=""> ein, sodass sich der Klassenname je nach Controller ändert.

In Ihrer SCSS-Datei. "products.css.scss" beginnt mit dem Styling der "CSS CLASS" für Produkte. In unserem Fall handelt es sich um .products, in denen sich eine Reihe von Stilen befindet.

Eine kleine Änderung, die grundsätzlich verhindert, dass die Klasse .products auf den Körper angewendet wird, wodurch wiederum verhindert wird, dass der Rest ebenfalls gestaltet wird. 

1
daveferrara1

Ich war mit dem gleichen Problem konfrontiert, aber ich habe meine CSS zum Laufen gebracht ... Ich habe einfach alle Strings in Anführungszeichen in doppelte Anführungszeichen in der Datei index.html.erb geändert. Ich verwende Rails 3.2.6

1
Farzia

in Ihrer Datei 'layout.html.erb' erhält die Asset-Pipeline nur die application.css, da Sie sie in Ihrer Datei application.html.erb lesen können. 

Ich würde versuchen, die Zeile "@import" products "" in diese application.css-Datei einzufügen.

1
Andrea.cabral

Ich hatte das gleiche Problem mit Rails 3.2.0 mit Ruby-2.0.0-p247. Ich habe jeden Vorschlag in diesem Thread ausprobiert. Ich habe keine Ahnung warum, aber der Umstieg auf Rails 3.2.12 hat es behoben. 

0
root

Es ist spät und vielleicht habe ich etwas verpasst. Was meinen Sie mit "CSS wird in meiner Rails-App nicht geladen"? Wenn Sie den Seitenquellcode in Ihrem Browser anzeigen, sehen Sie die Stylesheet-Link-Elemente Ihrer Anwendung? Ist Ihr Tisch so gestylt?

Aus dem, was ich im Serverprotokoll sehe:

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

Ihre Anwendung verwendet die CSS-Dateien.

Übrigens, wie Sie sagten, die application.css "lädt" die anderen CSS-Dateien, geschieht dies mit requir_tree.