Ruby on Rails：如何使用 rails 项目添加 css 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7689609/
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
Ruby on Rails: How can I add a css file with rails project?
提问by shibly
The application.html.erb file:
application.html.erb 文件：
<!DOCTYPE html>
<html>
<head>
<title>Site</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I have a file "cake.generic.css" in public/ folder.
我在 public/ 文件夹中有一个文件“cake.generic.css”。
But when I reload the page the effect of css file is not working.
但是当我重新加载页面时，css 文件的效果不起作用。
If I see the page view source I see something like this:
如果我看到页面视图源，我会看到如下内容：
<!DOCTYPE html>
<html>
<head>
<title>Site</title>
<link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="6CPvchXr1amagxd7VmOzB82WGx/WmjfDOXjMLfjLzqQ=" name="csrf-token" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
</body>
</html>
What should I do to fix this problem?
我应该怎么做才能解决这个问题？
How can I set the public folder for stylesheets and javascripts?
如何为样式表和 javascripts 设置公共文件夹？
It looks that app/assets folder is set for css and js files?
看起来 app/assets 文件夹是为 css 和 js 文件设置的？
回答by Perry Horwich
Rails is likely consolidating all your css files into one that it is calling assets/all.css
Rails 可能会将您所有的 css 文件合并到一个它称为 assets/all.css 的文件中
Consider using the free plug-ins firebug+ firepathto further characterize the problem. This common combo of tools will help you to interrogate web page elements and see the css that is contributing to their display.
考虑使用免费插件firebug+ firepath进一步表征问题。这种常见的工具组合将帮助您查询网页元素并查看有助于其显示的 css。
回答by Cam Song
Copy cake.generic.cssto the folder public/assets/, if not exists make directory first.
复制cake.generic.css到文件夹中public/assets/，如果不存在先制作目录。
then add this to you erb<%= stylesheet_link_tag "cake.generic" %>
然后把这个加给你 erb<%= stylesheet_link_tag "cake.generic" %>
2nd question: How can i set the public folder for stylesheets and javascripts ?
第二个问题：如何为样式表和 javascripts 设置公共文件夹？
Just put all you images, js and css file under 'public/assets/' and then include them in the erbpages
只需将所有图像、js 和 css 文件放在“public/assets/”下，然后将它们包含在erb页面中
3rd question: It looks that app/assets folder is set for css and js files ?
第三个问题：看起来 app/assets 文件夹是为 css 和 js 文件设置的？
Yes, 'app/assets/stylesheets/' for css and scss file and 'app/assets/javascripts' for js and coffeescript file
是的，'app/assets/stylesheets/' 用于 css 和 scss 文件，'app/assets/javascripts' 用于 js 和 coffeescript 文件
You can get more info here: http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
您可以在此处获取更多信息：http: //guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
Hope this work for you:)
希望这对你有用:)
回答by Srinivas M.V.
Your Style sheet should be placed in the following directory \public\stylesheetsfrom your root project and also if you want to specify different location provide an absolute path inside stylesheet_link_tag("/public/yourfolder/test.css")
你的样式表应该放在\public\stylesheets你的根项目的以下目录中，如果你想指定不同的位置，请在里面提供一个绝对路径stylesheet_link_tag("/public/yourfolder/test.css")
回答by PrinceMo4
I had similar issue, but my fix was to make sure the css is under app/assets/stylesheets/ and I had to add the below line to the application.css file (my css file is named custom.css)
我有类似的问题，但我的解决方法是确保 css 位于 app/assets/stylesheets/ 下，我必须将以下行添加到 application.css 文件中（我的 css 文件名为 custom.css）
@import 'custom'
@import '自定义'
