CSS未在应用程序中加载答案

【问题标题】：CSS is not loading in appCSS未在应用程序中加载
【发布时间】：2012-01-15 09:17:10
【问题描述】：

CSS 不会加载到我的 rails 应用程序中。这是位于视图/产品中的 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 %>

然后我的 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>

我位于 assets/stylesheets 中的 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;
  }
}

最后我的 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 . 
 */

在我看来一切正常，据我了解，application.css 收集了所有其他 css 文件，因此您不必手动链接它们。我说的对吗？

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

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)

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

【问题讨论】：

您确定资产管道已启用吗？看起来不像。
我很确定它是。在文件 config/application.rb 中有 config.assets.enabled = true 行。有没有可以输入检查的命令？
all.css是你写的css文件吗？
当我尝试在浏览器中访问 all.css 文件时遇到路由错误。
这是一个全新的 Rails 3.1+ 应用程序，还是从以前的版本迁移而来？

标签： ruby-on-rails css ruby-on-rails-3 asset-pipeline assets

【解决方案1】：

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

layout "application"

您在某处有一个预资产管道<%= stylesheet_link_tag :all %>，它通常包括/public/stylesheets 中的所有样式表，但它告诉资产管道寻找一个名为all.css 的文件。

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

【讨论】：

【解决方案2】：

运行 rake assets:precompile 编译并将您的 css 从 /assets 复制到 /public（rails 3.1+）

【讨论】：

【解决方案3】：

我的情况是在我的样式表中修复错误并运行：

$ RAILS_ENV=development rake assets:clean

已解决问题。

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

【讨论】：

欢迎来到 Stackoverflow！一般来说，我们希望网站上的答案能够独立存在 - 链接很棒，但如果该链接断开，答案应该有足够的信息仍然有用。请考虑编辑您的答案以包含更多详细信息。请参阅FAQ 了解更多信息。
我花了两天时间尝试修复 Rails，然后在阅读您的答案时发现我的 CSS 中漏掉了一个逗号...

【解决方案4】：

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

<%= stylesheet_link_tag  "application" %>

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

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

但在我看来，您正在使用“使用 Rails 进行敏捷 Web 开发”，在这种情况下，您可能希望使用以下内容：

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

我希望我能对您和Agile Web Development with Rails book 的未来读者有所帮助，他们正在阅读 depot 应用程序示例。

【讨论】：

【解决方案5】：

我在阅读《使用 Rails 进行敏捷 Web 开发》一书时偶然发现了同样的问题。尝试了所有推荐的解决方案，但无济于事。

这对我有用：

在 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>

亮点是重要的部分。

在这里找到解决方案：http://pragprog.com/titles/rails4/errata，上面写着：

山姆鲁比说：http://pragprog.com/titles/rails4/source_code。

希望它仍然有帮助。

亚历克斯

【讨论】：

你能链接到解决方案吗？我只是在你提供的链接中看到了整个勘误表。谢谢
根本看不出这有什么关系...也找不到您提到的勘误表（您正在链接到 2013 年发布的第 4 版的勘误表，以及您的答案是在 2012 年发布的？！）

【解决方案6】：

使控制器成为 ApplicationController 的子级

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

class ProductsController < ApplicationController
  # all your code
end

链接到您的根 css 文件

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

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

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

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

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

*= require_tree .

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

【讨论】：

【解决方案7】：

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

希望对你有帮助！

【讨论】：

【解决方案8】：

刚刚开始工作。我不得不将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>

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

<%= stylesheet_link_tag params[:controller] %>

【讨论】：

【解决方案11】：

更改 index.html.erb

<table class="products">

【讨论】：

【解决方案12】：

看起来您从“使用 Rails 进行敏捷 Web 开发”一书中获得了此代码。在这种情况下，app/views/layouts/application.html.erb 中的一行可能不正确：改变

<body>

到

<body class='<%= controller.controller_name %>'>

至少它对我有用。

【讨论】：

【解决方案13】：

我遇到了同样的问题，但我的 css 可以工作了……我只是将 index.html.erb 文件中的所有单引号字符串更改为双引号。没有必要改变任何东西。我正在使用 Rails 3.2.6

【讨论】：

【解决方案14】：

如果您已在本地计算机上编译过一次资产以进行部署，它会成功，因此它会尝试使用这些资产。您可以使用rake assets:precompile 进行更新。或者您可以进入您的 tmp 文件夹（在 rails 应用程序的根目录中）并删除缓存/资产和缓存/sass 中的所有内容。然后，您可以进入 /public/assets 并删除其后带有哈希的所有内容（随机字符串）。然后重新启动服务器。这对我有用。

【讨论】：

【解决方案15】：

来自本书：使用 Rails 4 进行敏捷 Web 开发

在~第72页。

您会在图形中的标签旁边找到一个小箭头。

通过此更改，我们将在 <body class=""> 中包含控制器名称，以便类名称根据控制器进行更改。

在您的 SCSS 文件中。 “products.css.scss”是从设计产品的“CSS CLASS”开始的。在我们的例子中，它是 .products 里面嵌套了一堆样式。

一个小改动基本上阻止了 .products 类被应用到 body 上，这反过来又阻止了其余部分的样式。

【讨论】：

【解决方案16】：

已经很晚了，也许我错过了一些东西，“CSS 不会在我的 Rails 应用程序中加载”是什么意思？如果您在浏览器中查看页面源代码，您会看到应用程序的样式表链接元素吗？您的表格样式是否为切面样式？

根据我在服务器日志中看到的：

Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 [...]
Served asset /products.css - 304 Not Modified (0ms)

您的应用程序正在使用 CSS 文件。

顺便说一句，正如你所说的 application.css “加载”其他 CSS 文件，这是使用 require_tree 完成的。

【讨论】：

【解决方案17】：

我在使用 ruby-2.0.0-p247 的 Rails 3.2.0 时遇到了同样的问题。我尝试了这个线程中的每一个建议。我不知道为什么，但切换到 Rails 3.2.12 修复了它。

【讨论】：