CSS CSS未在应用程序中加载

Question

提问by Jamie

CSS won't load in my rails app. This is index.html.erb file located in view/products:

CSS 不会加载到我的 rails 应用程序中。这是位于 view/products 中的 index.html.erb 文件：

 <h1>Listing products</h1>

<table>
<% @products.each do |product| %>
  <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

  <td>
    <%= image_tag(product.image_url, :class=> 'list_image') %>
  </td>

  <td class="list_description"> 
    <dl>
      <dt><%= product.title %></dt>
      <dd><%= truncate(strip_tags(product.description), :length=> 80) %></dd>
    </dl>
  </td>

  <td class="list_actions">
    <%= link_to 'Show', product %><br/>
    <%= link_to 'Edit', edit_product_path(product) %><br/>
    <%= link_to 'Destroy', product, 
              :confirm=> 'Are you sure?',
              :method=> :delete %>
  </td>
</tr>
<% end %>
</table>

<br />

<%= link_to 'New product', new_product_path %>

Then I have the application.html.erb file located in view/layouts. This file should link the css to html.

然后我有位于视图/布局中的 application.html.erb 文件。此文件应将 css 链接到 html。

<!DOCTYPE html> 
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag  "application" %>
  <%= javascript_include_tag  "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

My css file products.css.scss located in assets/stylesheets looks like this:

我的 css 文件 products.css.scss 位于资产/样式表中，如下所示：

.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

 .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

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

    dd {
      margin: 0;
    }
  }

  .list_actions {
     font-size:    x-small;
     text-align:   right;
     padding-left: 1em;
  }

  .list_line_even {
    background-color:   #e0f8f8;
  }

  .list_line_odd {
    background-color:   #f8b0f8;
  }
}

And finally my my application.css file looks like this:

最后我的 application.css 文件如下所示：

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
 */

Everything looks okay to me and as I understand the application.css gathers up all the other css files so you don't have to link them all manually. Am I correct?

对我来说一切都很好，据我所知，application.css 收集了所有其他 css 文件，因此您不必手动链接它们。我对么？

Also here is the server log when I load the page:

这也是我加载页面时的服务器日志：

Started GET "/products" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
  Processing by ProductsController#index as HTML
  Product Load (0.1ms)  SELECT "products".* FROM "products" 
 Rendered products/index.html.erb within layouts/application (7.4ms)
 Completed 200 OK in 26ms (Views: 24.2ms | ActiveRecord: 0.4ms)


 Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /scaffolds.css - 304 Not Modified (0ms)


 Started GET "/assets/all.css" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /all.css - 404 Not Found (4ms)

 ActionController::RoutingError (No route matches [GET] "/assets/all.css"):


 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-                           3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.5ms)


 Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /products.css - 304 Not Modified (0ms)


 Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /jquery.js - 304 Not Modified (0ms)


 Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /jquery_ujs.js - 304 Not Modified (0ms)


 Started GET "/assets/products.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /products.js - 304 Not Modified (0ms)


 Started GET "/assets/defaults.js" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
 Served asset /defaults.js - 404 Not Found (3ms)

 ActionController::RoutingError (No route matches [GET] "/assets/defaults.js"):


 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-          3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.9ms)

Why is my app not showing any CSS?

为什么我的应用没有显示任何 CSS？

Answer 1

回答by Substantial

Do you have this in your ProductsController, or if absent, ApplicationController?

你有这个吗ProductsController，或者如果没有，ApplicationController？

layout "application"

You've got a pre-asset pipeline <%= stylesheet_link_tag :all %>somewhere, which normally includes all stylesheets in /public/stylesheets, but it's telling asset pipeline to look for a file named all.css.

你已经有了一个预资产管道<%= stylesheet_link_tag :all %>的地方，它通常包括所有的样式表/public/stylesheets，但它告诉资产管道查找一个文件名为all.css。

Since <%= stylesheet_link_tag :all %>is clearly not in your application.html.erblayout, some other layout is being rendered. Hunt it down, and/or ensure your controller(s) are calling the correct layout.

由于<%= stylesheet_link_tag :all %>显然不在您的application.html.erb布局中，因此正在呈现其他一些布局。追捕它，和/或确保您的控制器正在调用正确的布局。

Answer 2

回答by Michael Durrant

Run rake assets:precompileto compile and copy your css from /assets to /public (rails 3.1+)

运行rake assets:precompile以编译您的 css 并将其从 /assets 复制到 /public (rails 3.1+)

Answer 3

回答by ruby_object

I my case fixing an error in my style sheet and running:

我的案例修复了样式表中的错误并运行：

$ RAILS_ENV=development rake assets:clean

has fixed the problem.

已解决问题。

Running above command deletes your generated CSS files and forces rails to regenerate the CSS output from your Sass or SCSS files.

运行上面的命令会删除你生成的 CSS 文件并强制 rails 从你的 Sass 或 SCSS 文件中重新生成 CSS 输出。

Answer 4

回答by Alex D

I stumbled upon the same problem while following the Agile Web Development with Rails book. Tried all the recommended solutions but to no avail.

我在阅读 Agile Web Development with Rails 一书时偶然发现了同样的问题。尝试了所有推荐的解决方案，但无济于事。

Here's what worked for me:

以下是对我有用的内容：

In the aplication.html.erb file:

在 aplication.html.erb 文件中：

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class='<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->

<%= yield %>

</body>
</html>

The highlight is the important part.

亮点是重要的部分。

Found the solution here: http://pragprog.com/titles/rails4/errata, where it says:

在这里找到了解决方案：http: //pragprog.com/titles/rails4/errata，它说：

Sam Ruby says: http://pragprog.com/titles/rails4/source_code.

Sam Ruby 说：http: //pragprog.com/titles/rails4/source_code。

Hope it still helps.

希望它仍然有帮助。

Alex

亚历克斯

Answer 5

回答by AndrewPK

You might want to change your stylesheet link tag. I see you're currently using

您可能想要更改样式表链接标签。我看到你目前正在使用

<%= stylesheet_link_tag  "application" %>

A freshly generated rails app should have the following two link tags which will automatically include all stylesheets and javascript:

一个新生成的 rails 应用程序应该有以下两个链接标签，它们会自动包含所有的样式表和 javascript：

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>

But it seems to me that you're going along with the 'Agile Web Development with Rails Book', in which case, you might want to use the following:

但在我看来，您正在阅读“使用 Rails 进行敏捷 Web 开发”一书，在这种情况下，您可能需要使用以下内容：

<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", :media => "all" %>
<%= javascript_include_tag "application" %>

I hope I could be of help to you, and to future readers of the Agile Web Development with Rails bookwho are going through the depot application example.

我希望我能对您和使用 Rails进行敏捷 Web 开发一书的未来读者有所帮助，他们正在阅读 depot 应用程序示例。

Answer 6

回答by koly

well, modify the app/views/layouts/application.html.erb may work change the "stylesheet_link_tag "application"" to "stylesheet_link_tag "depot"".

好吧，修改 app/views/layouts/application.html.erb 可能会起作用，将“stylesheet_link_tag“application””更改为“stylesheet_link_tag“depot””。

I wish it will help you!

我希望它会帮助你！

Answer 7

回答by scientiffic

Just got it to work. I had to place the depot.cssfile in app/views/assets/stylesheets(NOT the public directory, as it said in the book), and I changed the stylesheet link in application.html.erbto look like this:

刚刚开始工作。我必须将depot.css文件放在app/views/assets/stylesheets（不是公共目录，正如书中所说的那样），并且我将样式表链接更改为application.html.erb如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag "depot"%>
  <%= javascript_include_tag  :defaults %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Answer 8

回答by Andrea.cabral

in your file 'layout.html.erb', the asset pipeline is getting the application.css only as you can read on your file application.html.erb.

在您的文件“layout.html.erb”中，资产管道仅在您可以在文件 application.html.erb 上读取时获取 application.css。

I would try to add the line '@import "products"' in that application.css file. Had the same issue and was able to fix it that way (using rails 4.1 though).

我会尝试在该 application.css 文件中添加行 '@import "products"'。有同样的问题并且能够以这种方式修复它（尽管使用 rails 4.1）。

Answer 9

回答by Mirror318

Make controller a child of ApplicationController

使控制器成为 ApplicationController 的孩子

To hook up your controller (and its views) to the pipeline, make sure your controller is a child of ApplicationController.

要将您的控制器（及其视图）连接到管道，请确保您的控制器是ApplicationController.

class ProductsController < ApplicationController
  # all your code
end

Link to your root css file

链接到您的根 css 文件

Also make sure your application.html.erbhas this line:

还要确保你application.html.erb有这一行：

<%= stylesheet_link_tag 'application', media: 'all' %>

This adds the core application.cssfile to your views.

这会将核心application.css文件添加到您的视图中。

Add all css files through your root file

通过根文件添加所有 css 文件

Finally make sure your application.csshas this line:

最后确保你application.css有这一行：

*= require_tree .

If all those are in place, every file in app/assets/stylesheets/will be included in the css pipeline.

如果所有这些都到位，则其中的每个文件app/assets/stylesheets/都将包含在 css 管道中。

Answer 10

回答by priyankvex

This might help someone looking this up. I had the similar issue. In my case css specified was being overridden by other css files properties.

这可能会帮助某人查找此内容。我有类似的问题。在我的情况下，指定的 css 被其他 css 文件属性覆盖。

Try adding this line to your application.html.erb.

尝试将此行添加到您的 application.html.erb。

<%= stylesheet_link_tag params[:controller] %>

CSS CSS未在应用程序中加载

提问by Jamie

回答by Substantial

回答by Michael Durrant

回答by ruby_object

回答by Alex D

回答by AndrewPK

回答by koly

回答by scientiffic

回答by Andrea.cabral

回答by Mirror318

Make controller a child of ApplicationController

使控制器成为 ApplicationController 的孩子

Link to your root css file

链接到您的根 css 文件

Add all css files through your root file

通过根文件添加所有 css 文件

回答by priyankvex

相关推荐

最近更新

标签

CSS CSS未在应用程序中加载

提问by Jamie

回答by Substantial

回答by Michael Durrant

回答by ruby_object

回答by Alex D

回答by AndrewPK

回答by koly

回答by scientiffic

回答by Andrea.cabral

回答by Mirror318

Make controller a child of ApplicationController

使控制器成为 ApplicationController 的孩子

Link to your root css file

链接到您的根 css 文件

Add all css files through your root file

通过根文件添加所有 css 文件

回答by priyankvex

相关推荐

CSS 位置：固定在 iframe 内

CSS 使选择元素中的文本太长时换行？

CSS 样式在 Outlook 2010 中不起作用？

CSS navbar-static-top 在 Bootstrap 3 中有什么作用？

相关推荐

最近更新

标签