web-dev-qa-db-ja.com

CSSがアプリに読み込まれていません

CSSはmy Rails app。にロードされません。これは、view/productsにあるindex.html.erbファイルです。

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

次に、view/layoutsにapplication.html.erbファイルがあります。このファイルは、cssをhtmlにリンクする必要があります。

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

<%= yield %>

</body>
</html>

Asset/stylesheetsにあるCSSファイルproducts.css.scssは次のようになります。

.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ファイルは次のようになります。

/*
 * 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ファイルを収集するので、それらをすべて手動でリンクする必要はありません。私は正しいですか？

また、ページをロードしたときのサーバーログもあります。

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が表示されないのはなぜですか？

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

これはProductsControllerにありますか、ない場合はApplicationControllerにありますか？

layout "application"

事前のパイプライン<%= stylesheet_link_tag :all %>があり、通常は/public/stylesheetsのすべてのスタイルシートが含まれていますが、all.cssという名前のファイルを探すようにアセットパイプラインに指示しています。

<%= stylesheet_link_tag :all %>は明らかにapplication.html.erbレイアウトにないため、他のレイアウトがレンダリングされています。それを追い詰める、および/またはあなたのコントローラが正しいレイアウトを呼び出していることを確認してください。

24
Substantial

実行rake assets:precompileは、CSSをコンパイルして/ assetsから/ publicにコピーします（Rails 3.1以降）

9
Michael Durrant

私は私のスタイルシートのエラーを修正して実行しています：

$ Rails_ENV=development rake assets:clean

問題を修正しました。

上記のコマンドを実行すると、生成されたCSSファイルが削除され、Rails=がSassまたはSCSSファイルからCSS出力を再生成するように強制されます。

7
ruby_object

Rails本。

ここに私のために働いたものがあります：

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>

ハイライトは重要な部分です。

ここで解決策を見つけました： http://pragprog.com/titles/Rails4/errata

Sam Ruby says： http://pragprog.com/titles/Rails4/source_code 。

それがまだ役立つことを願っています。

アレックス

3
Alex D

スタイルシートリンクタグを変更することもできます。現在使用していると思います

<%= stylesheet_link_tag  "application" %>

新しく生成されたRailsアプリには、すべてのスタイルシートとjavascriptが自動的に含まれる次の2つのリンクタグが必要です。

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

しかし、「RailsBookを使用したアジャイルWeb開発」と一緒に進んでいるように思えますが、その場合は、次のものを使用することをお勧めします。

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

皆さん、そしてデポアプリケーションの例を経験している アジャイルWeb開発withRailsbook の読者の助けになればと思います。

3
AndrewPK

コントローラーをApplicationControllerの子にする

コントローラー（およびそのビュー）をパイプラインに接続するには、コントローラーがApplicationControllerの子であることを確認してください。

class ProductsController < ApplicationController
  # all your code
end

ルートcssファイルへのリンク

また、application.html.erbには次の行があります。

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

これにより、コアapplication.cssファイルをビューに追加します。

ルートファイルからすべてのcssファイルを追加します

最後に、application.cssには次の行があります。

*= require_tree .

それらがすべて適切に配置されている場合、app/assets/stylesheets/はcssパイプラインに含まれます。

2
Mirror318

さて、app/views/layouts/application.html.erbを変更すると、 "stylesheet_link_tag" application ""が "stylesheet_link_tag" depot ""に変更される可能性があります。

あなたのお役に立てばと思います！

2
koly

動作するようになりました。 depot.cssファイルをapp/views/assets/stylesheetsに配置する必要がありました（本で述べたようにパブリックディレクトリではありません）。また、application.html.erbのスタイルシートリンクを次のように変更しました。

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

これは、これを調べる人を助けるかもしれません。同様の問題がありました。私の場合、指定されたcssは他のcssファイルプロパティによってオーバーライドされていました。

この行をapplication.html.erbに追加してみてください。

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

Index.html.erbを変更する

<table class="products">
1
Vladimir Milanovic

このコードは「アジャイルWeb開発with Rails」の本から入手したようです。この場合、おそらくapp/views/layouts/application.html.erbの1行が正しくありません：change

<body>

に

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

少なくとも私にとってはうまくいきます。

1
Putnik

ローカルマシンで一度アセットをコンパイルしてデプロイした場合、それを使用してそれらを使用しようとします。 rake assets:precompileを使用して更新できます。または、tmpフォルダー（Railsアプリのルート）に移動し、cache/assetsおよびcache/sassのすべてを削除します。その後、/ public/assetsに移動して、ハッシュを含むすべてのもの（ランダムな文字列）を削除してから、サーバーを再起動します。

1
Travis Pessetto

本から：Rails 4によるアジャイルWeb開発

〜72ページ.

グラフィックのタグの横に小さな矢印があります。

この変更では、<body class="">にコントローラー名を含めて、コントローラーに基づいてクラス名が変更されるようにします。

SCSSファイル内。 「products.css.scss」は、製品の「CSS CLASS」のスタイル設定から始まります。私たちの場合、それはその中にネストされたスタイルの束を持つ.productsです。

基本的に.productsクラスがボディに適用されないようにする小さな変更。これにより、残りのスタイルもスタイル設定されなくなります。

1
daveferrara1

私は同じ問題に直面しましたが、cssが動作するようになりました... index.html.erbファイル。何も変更する必要はありません。私はRails 3.2.6を使用しています

1
Farzia

ファイル「layout.html.erb」では、ファイルapplication.html.erbで読み取れる場合にのみ、アセットパイプラインはapplication.cssを取得しています。

そのapplication.cssファイルに '@import "products"'という行を追加しようとします。同じ問題があり、その方法で修正できました（Rails 4.1を使用））。

1
Andrea.cabral

Ruby-2.0.0-p247でRails 3.2.0でも同じ問題が発生していました。このスレッドですべての提案を試みました。理由はわかりませんが、Rails 3.2.12に切り替えると修正されました。

0
root

遅れて何か見逃したかもしれません。「CSSが私のRailsアプリ」に読み込まれませんか？ブラウザーでページのソースコードを表示すると、スタイルシートのリンクが表示されますアプリケーションの要素？テーブルはアスペクトに合わせてスタイル設定されていますか？

サーバーログに表示されるものから：

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

アプリケーションはCSSファイルを使用しています。

ところで、application.cssが他のCSSファイルを「ロード」すると言ったように、これはrequire_treeを使用して行われます。

0
Aldo 'xoen' Giambelluca