Rails加载除application.css.scss之外的所有样式表



我正在阅读《敏捷Web开发与Rails》一书,遇到了一个问题。

assets文件夹中的所有样式表都正确加载,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>

在应用程序中.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 */

我注意到很多人都有这个问题。我尝试过大多数解决方案,但都没有成功。

将CSS定义移动到另一个文件中,并将清单重命名为application.CSS。这样就可以实现

最新更新