简体   繁体   English

CSS样式表未在Rails 3.2.8中应用

[英]CSS stylesheet not applied in Rails 3.2.8

For some reason i can't get the stylesheet correctly applied in products I'm following the book "Agile Web Development with Rails 4th Edition". 由于某种原因,我无法正确使用产品中的样式表,因此我正在阅读《使用Rails进行敏捷Web开发第四版》一书。 In the book, it looks like the background inside the products table alternates with pink and other color. 在书中,产品表中的背景看起来像是用粉红色和其他颜色交替显示的。

I'm newbie on rails i don't know so much about CSS or SCSS yet. 我是新手,对CSS或SCSS的了解还不多。

The file ../depot/app/assets/stylesheets/products.css.scss has the following: 文件../depot/app/assets/stylesheets/products.css.scss具有以下内容:

/* START_HIGHLIGHT */
.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;
  }
}
/* END_HIGHLIGHT */

This is ..app/views/products/index.html.erb 这是..app / views / 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 %>

And ..app/views/layouts/application.html.erb 和..app / views / layouts / application.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>

first of all 首先

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

I think = is missing in here: 我认为这里缺少=:

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

Second one 第二个

without manifest file (application.css) it is hard to say if you require that stylesheet but I suppose it should be: 没有清单文件(application.css),很难说是否需要该样式表,但我想应该是:

/*
 *= require_self
 *= require products
 */

or even better instead of require inside manifest file, include css for particular controller this way in layout: 甚至更好,而不是要求在清单文件内,以这种方式在布局中包括用于特定控制器的CSS:

<%= stylesheet_link_tag params[:controller] %>

also for best practice before you ask question, please ensure if in your browser that particular css is included. 同样,为了在您提出问题之前获得最佳实践,请确保您的浏览器中是否包含特定的CSS。 Inspect compiled css or document structure with developer tools. 使用开发人员工具检查已编译的CSS或文档结构。

best 最好

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM