0

我正在关注使用 Rails 进行敏捷 Web 开发的书籍，但遇到了问题。

我在资产文件夹中的所有样式表都正确加载，除了 application.css.scss

将所有资产的副本运行bundle exec rake assets:precompile到公用文件夹，这似乎可行，但我不想每次都这样做。

在 application.html.erb 中：

<!DOCTYPE html>
<html>
<head>
    <title>Pragprog Books Online Store</title>
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
</head>
<body class='<%= controller.controller_name %>'>

<div id="banner">
    <%= image_tag('logo.png') %>
    <%= @page_title || "Pragmatic Bookshelf" %>
</div>

<div id="columns">
    <div id="side">
        <ul>
            <li><a href="http://www....">Home</a></li>
            <li><a href="http://www..../faq">Questions</a></li>
            <li><a href="http://www..../news">News</a></li>
            <li><a href="http://www..../contact">Contact</a></li>
        </ul>
    </div>
    <div id="main">
        <%= yield %>
    </div>
</div>
</body>
</html>

在 application.css.scss 中：

/*
 * This is a manifest file that'll be compiled into application.css, which will
 * include all the files listed below.
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets,
 * vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any,
 * can be referenced here using a relative path.
 * 
 * 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 .
 */

/* START_HIGHLIGHT */
#banner {
  background: #FFF;
  padding: 10px;
  border-bottom: 2px solid;
  font: small-caps 40px/40px "Times New Roman", serif;
  color: #282;
  text-align: center;

  img {
    float: left;
  }
}

#notice {
  color: #000 !important;
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}

#columns {
  background: #141;

  #main {
    margin-left: 17em;
    padding: 1em;
    background: white;
  }

  #side {
    float: left;
    padding: 1em 2em;
    width: 13em;
    background: #141;

    ul {
      padding: 0;
      li {
        list-style: none;
        a {
          color: #bfb;
          font-size: small;
        }
      }
    }
  }
}
/* END_HIGHLIGHT */

我注意到很多人都有这个问题。我已经尝试了大多数解决方案，但没有运气。

4

1 回答 1

0

将您的 CSS 定义移动到另一个文件中，并将您的清单重命名为 application.css。应该这样做

于 2013-07-22T23:26:11.660 回答