Question

我正在使用Rails书籍跟踪敏捷Web开发，并遇到了一个问题。

除了application.css.scss

之外，assets文件夹中的所有样式表都正确加载

在所有资产上运行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 */

我注意到有很多人有这个问题。我没有运气就尝试了大部分解决方案。

Answer 1

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

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

1 个答案: