1

「Railsを使用したアジャイルWeb開発」（第4版、Rails 3）からRailsを学習していますが、スタイルシートを適用するのに問題があります。これまでに行ったことをすばやく説明するために、最初にスキャフォールドを生成しました。

 rails generate scaffold Product title:string description:text image_url:string price:decimal

そしてもちろん：

 rake db:migrate

次に、db / seeds.rbファイルを使用して、いくつかのデータを製品テーブルにロードしました。localhost：3000 / productsをロードしたとき、すべてがうまく機能していました。ここで、本が提供するスタイルシートコードを、スキャフォールドによって生成された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:   #e0f8f8;
  }
  .list_line_odd {
    background:   #f8b0f8;
  }
}

localhost：3000 / productsをロードすると、スタイルシートが適用されていません。inspect要素でスタイルシートを確認できますが、適用されていません。私は想像できるすべてを試しました。まず、このコード行がapplication.html.erbにあることを確認しました。

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

新しいスタイルシート（products.css.scss）がassets / stylesheets /ディレクトリにあるとすると、ロードする必要があります。localhost：3000 / productsの要素を調べると、実際にそこにスタイルシートが表示されますが、適用されていません。私が試した次のことは走ることでした：

rake assets:precompile

失敗。public / assetディレクトリを削除した後、次のコード行がconfig/application.rbファイルにあることを確認しました。

 config.assets.enabled = true

そうだった。次に、assets / stylesheet / application.cssファイルに移動し、次のコード行を追加してみました。

*= require products

繰り返しますが、成功しません。最後に、サーバーを再起動して、効果があるかどうかを確認しました。再び失敗。私はここで行き止まりになっています。私はこの問題に燃え尽きてイライラしているので、この問題に関するあらゆる意見をいただければ幸いです。

4

2 に答える 2

0

私はまったく同じ問題を抱えていたので、答えを見つけるのに1時間費やしました。あなたのapplication.css.sassに行き、それがあることを確認してください

/* ...
*= require_self
*= require_tree .
*/

初期化。これは、apps/assets/stylesheets 内の他のすべての .css.sass を自動的にロードし、それらを public/assets/stylesheets にプリコンパイルして 1 つの統計 css ファイルにし、ブラウザーに提供します。

于 2012-08-21T06:46:31.257 に答える
0

これが機能するかどうかはわかりませんが、試してみる価値はあります。.css を削除してみてください。products.scss だけにしてください。また、非常に単純なスタイルを実行して、それが機能するかどうかを確認してください。または、インラインで表示することもできます。

于 2012-06-12T16:39:30.190 に答える