CSS 对于 Rails 视图 *.html.erb：我可以在哪里放置样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10250468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
For a Rails View *.html.erb : where can I place the style sheet?
提问by banditKing
I have this file:
我有这个文件：
app/views/listings/list.html.erb
in my rails project. Here are the contents of the file:
在我的 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>
Id like to apply a style sheet to it. Where should I place the stylesheet? I tried placing the code in this file:
我想对其应用样式表。我应该在哪里放置样式表？我尝试将代码放在这个文件中：
app/assets/stylesheets/listings.css.scss
But the style wasn't applied to the html file. Also do I need to change anything in my html view file to include the style sheet?
但该样式并未应用于 html 文件。我还需要更改我的 html 视图文件中的任何内容以包含样式表吗？
This is the style sheet that resides at : "app/assets/stylesheets/listings.css.scss"
这是位于以下位置的样式表：“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%;
}
So wondering if anyone can give me a hand?
所以想知道是否有人可以帮我一把？
Thanks
EDIT
So the application.html.erb file is fine, so is the application.css. I altered the list.html.erb file after reading the answer posted below.
The new list.html.erb file is as follows:
谢谢
编辑
所以 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'%>
<%= stylesheet_link_tag 'listings' %>
<%= stylesheet_link_tag 'listings' %>
Only issue is now, I want to take
唯一的问题是现在，我想拿
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
this part out from the list.html.erb and put it into the list.css.scss file. But when I do that the map_canvas disappears from the page, it doesnt show.
这部分从 list.html.erb 中取出并放入 list.css.scss 文件中。但是当我这样做时，map_canvas 从页面上消失了，它没有显示。
回答by Andrew
Where you put the stylesheet is fine. You need to make sure that your application layout (app/views/layouts/application.html.erb) includes the stylesheets in the header:
放置样式表的位置很好。您需要确保您的应用程序布局 ( app/views/layouts/application.html.erb) 在标题中包含样式表：
stylesheet_link_tag 'application'
Then you need to make sure it's being included in your application manifest: app/assets/stylesheets/application.css
然后你需要确保它被包含在你的应用程序清单中： app/assets/stylesheets/application.css
At the top you should see a block that looks like this:
在顶部，您应该看到一个如下所示的块：
/* ...
*= require_self
*= require_tree .
*/
If it doesn't say *= require_tree .then it won't autoload the scss files in your stylesheets directly. For more see the rails guide.
如果它没有说，*= require_tree .那么它不会直接自动加载样式表中的 scss 文件。有关更多信息，请参阅导轨指南。
If your application layout and manifest are correct and you're still having issues, add the text of those files to the question and I'll take a look.
如果您的应用程序布局和清单正确，但仍有问题，请将这些文件的文本添加到问题中，我会查看。
Update: Also, it looks like you're not understanding layouts correctly.
更新：此外，您似乎没有正确理解布局。
When any view renders you want the final output to look like this:
当任何视图呈现时，您希望最终输出如下所示：
<!DOCTYPE HTML>
<html>
<head>
...header stuff goes here...
</head>
<body>
... body stuff goes here...
</body>
</html>
Your headers etc. are pretty much standard stuff that are repeated all the time, only the content in the main part of your page is different from page to page. So to keep you from having to duplicate this stuff over and over again Rails uses layouts.
您的标题等几乎是一直重复的标准内容，只有页面主要部分的内容因页面而异。所以为了让你不必一遍又一遍地复制这些东西，Rails 使用了布局。
Your layout file, app/views/layouts/application.html.erbshould look like this (at minimum)
您的布局文件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>
When you load a given view rails will fill in the content from that view where the yieldcommand is in the layout.
当您加载给定的视图时，rails 将填充该视图中的内容，其中yield命令在布局中。
Note, your view is named wrong. If you are showing a list it should be app/views/listings/show.html.erb, or if you are showing the index of all the lists it should be app/views/listings/index.html.erb.
请注意，您的视图命名错误。如果您要显示一个列表，它应该是app/views/listings/show.html.erb，或者如果您要显示所有列表的索引，它应该是app/views/listings/index.html.erb。
Then in that file you should have:
然后在那个文件中你应该有：
<h1>This file is:"index.html.erb"</h1>
See the rails guide for more about layouts and rendering.
有关布局和渲染的更多信息，请参阅 rails 指南。
However, it looks like you're trying to dive into rails with no idea what's going on in the system. Welcome to Rails, I think you'll find it's really great, but you will do yourself a huge favor to start with a good tutorial. You can try the Getting Started Guide. I also recommend Michael Hartl's book "Rails 3 Tutorial". It's a great resource.
但是，看起来您正在尝试深入了解 Rails 而不知道系统中发生了什么。欢迎来到 Rails，我想你会发现它真的很棒，但是如果你从一个好的教程开始，你会对自己有很大的帮助。您可以尝试使用入门指南。我还推荐 Michael Hartl 的书“Rails 3 教程”。这是一个很好的资源。
回答by Mian Kashif Ali
I had come to know the same problem but solved, follow the instructions below
我已经知道同样的问题但解决了，请按照以下说明进行操作
place your xxxx.css file in assets/stylesheets e.g in app/assets/stylesheets/xxxx.css
Edit /config/initializers/assets.rband paste this code
将您的 xxxx.css 文件放在资产/样式表中，例如在app/assets/stylesheets/xxxx.css 中
编辑/config/initializers/assets.rb并粘贴此代码
Rails.application.config.assets.precompile += %w( xxxx.css )and save it.
Rails.application.config.assets.precompile += %w( xxxx.css )并保存它。
3- in the head tags section of your list.html.erbadd
3- 在list.html.erb的 head 标签部分添加
<%= stylesheet_link_tag 'xxxx' %>
e.g
例如
<head>
<%= stylesheet_link_tag 'xxxx' %>
<head>
4.Restart rails server for effects
4.重启rails服务器查看效果
Chill!!!!
寒意！！！！
回答by Simon Perepelitsa
You should have a stylesheet_link_tag in <head>:
你应该有一个 stylesheet_link_tag <head>：
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
If you don't have an application.css manifest you can link to the stylesheet directly instead:
如果您没有 application.css 清单，您可以直接链接到样式表：
<%= stylesheet_link_tag 'listings' %>
