CSS樣式 - 車廠從敏捷Web開發使用Rails

我這個苦苦掙扎了好幾個小時，嘗試了所有的解決方案，我發現，和沒有運氣。不過，我第一次嘗試從書中運行Depot示例，卻沒有應用任何CSS。CSS樣式 - 車廠從敏捷Web開發使用Rails

我敢肯定SCSS編譯，鉻表明我application.css，scaffolds.css和products.css加載。我試圖創建其他css文件 - 不SCSS - 但只是局部的運氣，只有一些造型的應用 - 休息與用戶代理樣式匹配，並繼承了一些scaffolds.css性質的 - 但不是重要的。

我加載所有的CSS在application.html.erb：

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

並在同一個文件中我聲明瞭類：從產品/ index.html的

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

表。 RB是沒有什麼不尋常：

<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), lenght: 80) %></dd> 
     </dl> 
    </td> 
    <td class="list_actions"> 
     <%= link_to 'Show', product %><br/> 
     <%= link_to 'Edit', edit_product_path(product) %><br/> 
     <%= link_to 'Delete', product, confirm: 'Are you sure?', method: :delete %> 
    </td> 
    </tr> 
<% end %> 
</table>

和products.scss（我試圖從.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; 
     } 
}

和我application.css看起來是這樣的：

/* 
*= require_self 
*= require_tree . 
*/

而顯然，事情是on Rails的3.2.12和Ruby 1.9.3運行wrong.I'm。 Ruby on Rails對我來說是新的，但我強烈地渴望學習一些東西（並且我有一些時間學習 - 可能在未來幾個月內不會發生），但當我像這樣卡住時，我失去了時間，並且什麼都不學習 - 或幾乎沒有 - 新:)

如果有人回答我碰巧沒有找到合適的答案，大的道歉，只是點我在正確的方向，給推進器踢。

來源

2013-02-25 Marcin Serkies

我已經開始努力了。 CSS驗證表明，有錯誤：

遇到：「\ u200b」（8203），後：「」

所以現在我把手工代碼，字符一個字符後無複製/從書中粘貼。它看起來像它的工作移除TMP /緩存和公共/ application.css

來源

2013-02-25 19:10:19

應該products.css.scss不products.scss下/應用/資產/樣式表/

當我看着你的示例表把一個div標籤帶有class =「產品」在表格上方。

<div class="products"> 
    <table> 
    </table> 
</div>

來源

2013-02-25 15:19:41 jamesv

據我所知，這是如果文件被命名的CSS或.css.scss沒有區別 - 但當然，試着用兩。另外 - 如您所見，類「產品」用於標籤。此外，我試圖做到這一點沒有嵌套造型 - 只要所有元素的CSS無論父母標記，它仍然無法正常工作。 – 2013-02-25 15:51:40

表需要申報後級，所以在索引文件應該是

<table class ="products">

無論是書還是下載文件有這種方式，但通過勘誤挖掘得出的答案。 https://pragprog.com/titles/rails4/errata

來源

2015-02-23 12:38:48

將生成的選擇器是'.products table'，將該類添加到表元素中將不起作用（另外，有人已經在此之前給出了該答案）。 – cimmanon 2015-02-23 13:30:09

它在這裏工作。沒有它，至少在書中的這一點上是不行的。因此，通過本書工作並發現這個問題的任何人都會感到沮喪。我在勘誤表中找到了答案，在我所提到的書的作者寫的一篇文章中。另一個答案將其包裝在一個div中，這不必要地使其複雜化。 – 2015-02-24 14:45:09

CSS樣式 - 車廠從敏捷Web開發使用Rails

回答

相關問題