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が表示されないのはなぜですか?
これはProductsController
にありますか、ない場合はApplicationController
にありますか?
layout "application"
事前のパイプライン<%= stylesheet_link_tag :all %>
があり、通常は/public/stylesheets
のすべてのスタイルシートが含まれていますが、all.css
という名前のファイルを探すようにアセットパイプラインに指示しています。
<%= stylesheet_link_tag :all %>
は明らかにapplication.html.erb
レイアウトにないため、他のレイアウトがレンダリングされています。それを追い詰める、および/またはあなたのコントローラが正しいレイアウトを呼び出していることを確認してください。
実行rake assets:precompile
は、CSSをコンパイルして/ assetsから/ publicにコピーします(Rails 3.1以降)
私は私のスタイルシートのエラーを修正して実行しています:
$ Rails_ENV=development rake assets:clean
問題を修正しました。
上記のコマンドを実行すると、生成されたCSSファイルが削除され、Rails=がSassまたはSCSSファイルからCSS出力を再生成するように強制されます。
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 。
それがまだ役立つことを願っています。
アレックス
スタイルシートリンクタグを変更することもできます。現在使用していると思います
<%= 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 の読者の助けになればと思います。
コントローラーを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パイプラインに含まれます。
さて、app/views/layouts/application.html.erbを変更すると、 "stylesheet_link_tag" application ""が "stylesheet_link_tag" depot ""に変更される可能性があります。
あなたのお役に立てばと思います!
動作するようになりました。 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>
これは、これを調べる人を助けるかもしれません。同様の問題がありました。私の場合、指定されたcssは他のcssファイルプロパティによってオーバーライドされていました。
この行をapplication.html.erbに追加してみてください。
<%= stylesheet_link_tag params[:controller] %>
Index.html.erbを変更する
<table class="products">
このコードは「アジャイルWeb開発with Rails」の本から入手したようです。この場合、おそらくapp/views/layouts/application.html.erbの1行が正しくありません:change
<body>
に
<body class='<%= controller.controller_name %>'>
少なくとも私にとってはうまくいきます。
ローカルマシンで一度アセットをコンパイルしてデプロイした場合、それを使用してそれらを使用しようとします。 rake assets:precompile
を使用して更新できます。または、tmpフォルダー(Railsアプリのルート)に移動し、cache/assetsおよびcache/sassのすべてを削除します。その後、/ public/assetsに移動して、ハッシュを含むすべてのもの(ランダムな文字列)を削除してから、サーバーを再起動します。
本から:Rails 4によるアジャイルWeb開発
〜72ページ.
グラフィックのタグの横に小さな矢印があります。
この変更では、<body class="">
にコントローラー名を含めて、コントローラーに基づいてクラス名が変更されるようにします。
SCSSファイル内。 「products.css.scss」は、製品の「CSS CLASS」のスタイル設定から始まります。私たちの場合、それはその中にネストされたスタイルの束を持つ.productsです。
基本的に.productsクラスがボディに適用されないようにする小さな変更。これにより、残りのスタイルもスタイル設定されなくなります。
私は同じ問題に直面しましたが、cssが動作するようになりました... index.html.erb
ファイル。何も変更する必要はありません。私はRails 3.2.6を使用しています
ファイル「layout.html.erb」では、ファイルapplication.html.erbで読み取れる場合にのみ、アセットパイプラインはapplication.cssを取得しています。
そのapplication.cssファイルに '@import "products"'という行を追加しようとします。同じ問題があり、その方法で修正できました(Rails 4.1を使用))。
Ruby-2.0.0-p247でRails 3.2.0でも同じ問題が発生していました。このスレッドですべての提案を試みました。理由はわかりませんが、Rails 3.2.12に切り替えると修正されました。
遅れて何か見逃したかもしれません。「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を使用して行われます。