简体   繁体   English

Ruby on Rails和CSS问题

[英]ruby on rails and css issue

I am learning ruby on rails, but I have this problem with my CSS code. 我正在学习Rails上的ruby,但是我的CSS代码有这个问题。

so in ~/Ruby Code/My_Project/app/views/layouts/application.html.erb I have this: 所以在~/Ruby Code/My_Project/app/views/layouts/application.html.erb我有这个:

<!DOCTYPE html>
<html>
<head>
  <title>MyProject</title>
  <%= stylesheet_link_tag    :all  %>
  <%= javascript_include_tag :defaults %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

and in ~/Ruby Code/My_Project/public/stylesheets I have this, a CSS file called "My_Project.css". 在〜/ Ruby Code / My_Project / public / stylesheets中,我有一个名为“ My_Project.css”的CSS文件。

also in ~/Ruby Code/My_Project/app/views/users, I have the index.html.erb file: 同样在〜/ Ruby Code / My_Project / app / views / users中,我有index.html.erb文件:

<div id="user_list" >

<h1>Listing users</h1>

<table>

    <% @users.each do |user| %>

    <tr class="<%= cycle('list_line_odd', 'list_line_even') %>" >

        <td class="user_description" >
            <dl>
            <dt><%= user.name %></dt>
            <dt><%= user.surname %></dt>
            <dt><%= user.age %></dt>
            <dt><%= user.date_birth %></dt>
            <dt><%= user.date_of_reg %></dt>
            <dt><%= user.email %></dt>
        </td>
        <td class="list_actions" >
            <%= link_to 'Show', user %><br/>
            <%= link_to 'Edit', edit_user_path(user) %><br/>
            <%= link_to 'Destroy', user,
            :confirm => 'Are you sure?',
            :method => :delete %>
        </td>

    </tr>
    <% end %>

</table>
</div>
<br />
<%= link_to 'New user', new_user_path %>

why is Ruby not loading the CSS file ? 为什么Ruby无法加载CSS文件? Is it placed in the wrong directory? 它放置在错误的目录中吗?

Since rails 3.1 there is a thing called the asset pipeline . 从rails 3.1开始,有一个东西叫做资产管道 This will make sure that your css files are packaged into 1 file, and one other file containing all your js files. 这将确保您的css文件打包成1个文件,而另一个文件包含所有js文件。 This will make sure that the initial download is much quicker. 这样可以确保初始下载更快。

In your app/assets/stylesheets is an application.css which serves as the manifest. 在您的app/assets/stylesheets有一个application.css作为清单。 This file will contain a description which css files will need to be included in the complete application.css . 该文件将包含描述,哪些css文件需要包含在完整的application.css

This file, by default, contains something like 默认情况下,此文件包含类似

/* 
 *= require_self
 *= require_tree .
 */

and this means that whatever is inside the application.css file itself, plus all other files in the same folder will be included in the final application.css . 这意味着application.css文件本身内部的内容以及同一文件夹中的所有其他文件都将包含在最终的application.css

Hope this helps. 希望这可以帮助。

2 issues: 2个问题:

  1. wrong path - don't put asset files directly into public. 错误的路径 -不要将资产文件直接公开。 the asset pipeline compiles files from /app/assets/stylesheets and outputs them to /public/assets . 资产管道从/app/assets/stylesheets编译文件并将其输出到/public/assets So move your css file to /app/assets/stylesheets first. 因此,请先将您的CSS文件移至/app/assets/stylesheets

  2. wrong filename - see the 5th line of your first code example where it says <%= stylesheet_link_tag :all %> ? 文件名错误 -请参见第一个代码示例的第5行,其中显示<%= stylesheet_link_tag :all %>吗? That's telling the asset pipeline to look for a css file in /public/assets named all.css . 这告诉资产管道在/public/assets all.css名为all.css的css文件。 Obviously your css file is not named that. 显然,您的css文件未命名为该文件。 So change that as well and you should be good to go! 所以也改变它,你应该很好!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM