Ruby on Rails：如何使用rails项目添加css文件？

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文件设置的?

4 个解决方案

#1

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 + firepath to 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。

#2

Copy cake.generic.css to 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 erb pages

只需将所有图像,js和css文件放在“public / assets /”下,然后将它们包含在erb页面中

3rd question: It looks that app/assets folder is set for css and js files ?

第3个问题:看起来app / assets文件夹是为css和js文件设置的?

Yes, 'app/assets/stylesheets/' for css and scss file and 'app/assets/javascripts' for js and coffeescript file

是的,用于css和scss文件的'app / assets / stylesheets /'和用于js和coffeescript文件的'app / assets / javascripts'

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:)

希望这对你有用:)

#3

Your Style sheet should be placed in the following directory \public\stylesheets from 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”)中提供绝对路径

#4

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'

#1