对于 Rails 视图 *.html.erb ：我可以在哪里放置样式表？答案

【问题标题】：For a Rails View *.html.erb : where can I place the style sheet?对于 Rails 视图 *.html.erb ：我可以在哪里放置样式表？
【发布时间】：2012-04-20 17:03:08
【问题描述】：

我有这个文件：

app/views/listings/list.html.erb

在我的 Rails 项目中。以下是文件内容：

<h1>This file is:"list.html.erb"</h1>  

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=false">  
    </script>  

    <%=javascript_include_tag 'application'%>  
  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:80%; height:80%"</div>    
    <input type="button" onclick="getlistings();" value="Add Markers">   
    <input type="button" onclick="clearMarkers();" value="Remove Markers">   
  </body>  
</html>

我想给它应用一个样式表。我应该把样式表放在哪里？我尝试将代码放在此文件中：

app/assets/stylesheets/listings.css.scss

但该样式未应用于 html 文件。我还需要更改 html 视图文件中的任何内容以包含样式表吗？

这是驻留在以下位置的样式表：“app/assets/stylesheets/listings.css.scss”

// Place all the styles related to the Listings controller here.  
// They will automatically be included in application.css.  
// You can use Sass (SCSS) here: http://sass-lang.com/  
.listings  
{  
  table tr td  
  {  
    padding: 5px;  
    vertical-align: top;  
  }  


dt  
{  
  color: #232;  
  font-weight: bold;  
  font-size: larger;  
}  

dd  
{  
  margin: 0;  
}  
}  
#map_canvas  
{  
  width: 80%;  
  height: 80%;  
}

所以想知道是否有人可以帮我一把？

谢谢
编辑
所以application.html.erb文件没问题，application.css也是。阅读下面发布的答案后，我更改了 list.html.erb 文件。新的list.html.erb文件如下：

<h1>Filename = list.html.erb</h1>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }   
</style>  
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=AIz&sensor=false">  
</script>  
<%= stylesheet_link_tag 'application' %>  
<%=javascript_include_tag 'application'%>

唯一的问题是现在，我要服用

<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }  
</style>

这部分从list.html.erb中取出，放到list.css.scss文件中。但是当我这样做时，map_canvas 从页面上消失了，它没有显示。

【问题讨论】：

在 H1 之后，<!DOCTYPE html> 和 </html> 之间从哪里复制和粘贴 HTML 部分？那是你的应用程序布局文件吗？
不，我从一个在线教程中获得了这部分内容，该教程展示了如何使用 Google 地图 v3。他们在他们的例子中使用了这个 html。为什么这不是它应该的样子？
嗯，这就是您的app/views/listings/list.html.erb 文件的确切内容吗？如果是这样，那不应该。任何页面的外部 HTML、HEAD 等都应位于您的 layouts/application.html.erb 文件中。页面内不应该有第二个<HTML>。
是的，这就是确切的内容。我懂了。我使用的示例要求我们将该文件从布局中取出。好的，非常感谢您的提示！

标签： ruby-on-rails css

【解决方案1】：

样式表的放置位置很好。您需要确保您的应用程序布局 (app/views/layouts/application.html.erb) 在标题中包含样式表：

stylesheet_link_tag 'application'

然后您需要确保它包含在您的应用程序清单中：app/assets/stylesheets/application.css

在顶部，您应该会看到如下所示的块：

/* ...
*= require_self
*= require_tree .
*/

如果它没有说*= require_tree .，那么它就不会直接在你的样式表中自动加载scss 文件。更多信息请见the rails guide。

如果您的应用程序布局和清单是正确的，但您仍然遇到问题，请将这些文件的文本添加到问题中，我会看看。

更新：另外，您似乎没有正确理解布局。

当任何视图呈现时，您希望最终输出看起来像这样：

<!DOCTYPE HTML>
<html>
  <head>
    ...header stuff goes here...
  </head>
  <body>
    ... body stuff goes here...
  </body>
</html>

您的标题等几乎都是标准的东西，一直在重复，只有页面主要部分的内容因页面而异。所以为了避免你不得不一遍又一遍地复制这些东西，Rails 使用了布局。

您的布局文件 app/views/layouts/application.html.erb 应该如下所示（至少）

<!DOCTYPE html>
<html>
  <head>
    <title>The name of your site</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %>
  <head>
  <body>
    <%= yield %>
  </body>
</html>

当您加载给定的视图时，rails 将填充该视图中 yield 命令在布局中的内容。

注意，您的视图命名错误。如果你显示一个列表，它应该是app/views/listings/show.html.erb，或者如果你显示所有列表的索引，它应该是app/views/listings/index.html.erb。

那么在那个文件中你应该有：

<h1>This file is:"index.html.erb"</h1>

有关 layouts and rendering 的更多信息，请参阅 rails 指南。

但是，您似乎正试图潜入轨道，却不知道系统中发生了什么。欢迎使用 Rails，我想你会发现它真的很棒，但是你会帮自己一个很大的忙，从一个好的教程开始。你可以试试Getting Started Guide。我还推荐 Michael Hartl 的书“Rails 3 Tutorial”。这是一个很好的资源。

【讨论】：

application.css 文件包含您在帖子中提到的信息。这是一个很棒的答案。非常感谢。我在上面添加了 application.html.erb 文件，我正在努力整合您的建议。再次感谢。
没有问题。如果这个答案对您有所帮助，您介意接受吗？

【解决方案2】：

我也遇到了同样的问题，但解决了，请按照以下说明进行操作

将您的 xxxx.css 文件放在资产/样式表中，例如 app/assets/stylesheets/xxxx.css
编辑 /config/initializers/assets.rb 并粘贴此代码

Rails.application.config.assets.precompile += %w( xxxx.css ) 并保存。

3- 在 list.html.erb 的头部标签部分添加

<%= stylesheet_link_tag 'xxxx' %>

例如

<head>
<%= stylesheet_link_tag 'xxxx' %>
<head>

4.重新启动rails服务器以获得效果

冷静！！！！

【讨论】：

【解决方案3】：

<head> 中应该有一个 stylesheet_link_tag：

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

如果您没有 application.css 清单，您可以直接链接到样式表：

<%= stylesheet_link_tag 'listings' %>

【讨论】：