未應用CSS樣式-帶有Rails的敏捷Web開發中的軟件倉庫

Question

我已經為此奮斗了幾個小時，嘗試了我發現的所有解決方案，但沒有運氣。 盡管如此，我第一次嘗試從書中運行Depot示例的過程是在未應用任何CSS的情況下運行的。

我確定scss已編譯，因為chrome向我展示了application.css，scaffolds.css和products.css已加載。 我嘗試創建其他css文件-而不是scss-但運氣不佳，僅應用了某些樣式-其余部分與用戶代理樣式表匹配，並繼承了一些scaffolds.css屬性-但不重要。

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

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

並且在同一文件中，我聲明了以下課程：

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

products / index.html.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 .
 */

顯然有問題，我在Rails 3.2.12和Ruby 1.9.3上運行。 Ruby on Rails對我來說是新手，但是我強烈渴望學習一些東西（而且我還有一段時間要學習-可能在接下來的幾個月中不會發生），但是當我陷入這種困境時，我會浪費時間，卻一無所知-或幾乎沒有-新:)

如果回答了，而我碰巧找不到正確的答案，則道歉，請將我指向正確的方向，並進行助推器踢。

Answer 1

我已經開始解決了。 CSS驗證程序顯示存在錯誤：

遇到：“ \\ u200b”（8203），之后：“”

所以現在我要逐個字符地手工編寫代碼，而不必從書中復制/粘貼。 刪除tmp / cache和public / application.css后，它似乎可以正常工作

Answer 2

它應該是/ app / assets / stylesheets /下的products.scss而不是product.scss

當我查看示例表時，在表上方放置一個帶有class =“ products”的div標簽。

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

Answer 3

表聲明需要類，因此在索引文件中應為

 <table class ="products">

書和可下載文件都沒有這種方式，但是仔細研究勘誤表可以得出答案。 https://pragprog.com/titles/rails4/errata

未應用CSS樣式-帶有Rails的敏捷Web開發中的軟件倉庫

問題描述

3 個解決方案

解決方案1
1 已采納 2013-02-25 19:10:19

解決方案2
0 2013-02-25 15:19:41

解決方案3
0 2015-02-23 12:38:48

未應用CSS樣式-帶有Rails的敏捷Web開發中的軟件倉庫

問題描述

3 個解決方案

解決方案1 1 已采納 2013-02-25 19:10:19

解決方案2 0 2013-02-25 15:19:41

解決方案3 0 2015-02-23 12:38:48

解決方案1
1 已采納 2013-02-25 19:10:19

解決方案2
0 2013-02-25 15:19:41

解決方案3
0 2015-02-23 12:38:48