将样式表传递给heroku答案

【问题标题】：Passing stylesheets to heroku将样式表传递给heroku
【发布时间】：2015-10-22 10:49:04
【问题描述】：

我有一个本地应用程序正在推送到 heroku，几个小时前它停止了工作。

Heroku 停止识别引导程序，并且我的本地主机和 heroku 都停止识别我的 css 文件。真正让我困惑的是，3 小时前 heroku 和我的本地主机都工作得很好。

我将我的代码回滚到我最后一次知道它可以工作时，但我的 application.css 文件仍然没有被确认，即使我知道它是完全相同的代码！

我没有在网上找到任何关于我的任何一个问题的 heroku 支持的答案，因此我们将不胜感激。

我所有的 HTML 文件（只有 heroku 无法识别的部分）：

<!DOCTYPE html>
<html>
<head><br><br>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Appv013</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="application.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top ">
  <div class="container-fluid">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <li><a href="#">Page 1</a></li>
      <!-- NOTES!!!  REPLACE ABOVE LINE AND
      USE BELOW FOR DROP DOWN THING

      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Page 1-1</a></li>
        <li><a href="#">Page 1-2</a></li>
        <li><a href="#">Page 1-3</a></li>
      </ul> -->
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>

  </ul>
</div>

<%= yield %>
 test 0.13.97
 </body>
 </html>

还有我的整个 CSS appliation.css 文件（这部分都不认识）：

body{
  margin-right: 10px;
  margin-left: 10px;
  background-color: #eee;
}
.navbar-inverse {
  background-color: #000000;
  border-color: #BFFFEA;
}

编辑：我在 git 中使用 heroku，下面是我运行本地服务器时终端的输出

Started GET "/" for ::1 at 2015-08-04 15:26:39 -0400
Processing by VisitorsController#index as HTML
  (1.0ms)  SELECT COUNT(*) FROM "users"
Rendered visitors/index.html.erb within layouts/application (2.1ms)
Completed 200 OK in 7ms (Views: 5.6ms | ActiveRecord: 1.0ms
Started GET "/application.css" for ::1 at 2015-08-04 15:26:39 -0400
ActionController::RoutingError (No route matches [GET] "/application.css"):
actionpack (4.2.3) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
web-console (2.2.1) lib/web_console/middleware.rb:39:in `call'
actionpack (4.2.3) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
railties (4.2.3) lib/rails/rack/logger.rb:38:in `call_app'
railties (4.2.3) lib/rails/rack/logger.rb:20:in `block in call'
activesupport (4.2.3) lib/active_support/tagged_logging.rb:68:in `block in tagged'
activesupport (4.2.3) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (4.2.3) lib/active_support/tagged_logging.rb:68:in `tagged'
railties (4.2.3) lib/rails/rack/logger.rb:20:in `call'
quiet_assets (1.1.0) lib/quiet_assets.rb:27:in `call_with_quiet_assets'
actionpack (4.2.3) lib/action_dispatch/middleware/request_id.rb:21:in `call'
rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
rack (1.6.4) lib/rack/runtime.rb:18:in `call'
activesupport (4.2.3) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
actionpack (4.2.3) lib/action_dispatch/middleware/static.rb:116:in `call'
rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
railties (4.2.3) lib/rails/engine.rb:518:in `call'
railties (4.2.3) lib/rails/application.rb:165:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
rack (1.6.4) lib/rack/content_length.rb:15:in `call'
rack (1.6.4) lib/rack/handler/webrick.rb:88:in `service'
/Users/Anna/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/httpserver.rb:138:in `service'
/Users/Anna/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/httpserver.rb:94:in `run'
/Users/Anna/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'

【问题讨论】：

当您在本地加载页面与在 Heroku 上加载页面时，开发工具控制台会显示什么？在 chrome 或 firefox 中，此快捷方式通常是 ctrl+shift+i 或 ctrl+shift+c 。特别是，网络应该向您显示资源是否可见，并且控制台将显示加载错误（如果有）。
网络显示本地主机的引导程序和 webkit 继承的 heroku 值（默认值我很确定）
我不确定您所说的“不识别”是什么意思。在开发工具的网络选项卡中，对样式表的请求是否获得 200 OK？控制台有错误吗？
@bwarren2 application.css 样式表出现 404 错误，引导样式表出现 304。奇怪的是 application.css 的大小为 0 b
您是否在 application.rb 中设置了 config.serve_static_assets = true ？并在 gemfile 中添加 'rails_12factor', group: :production？并尝试 rake assets:precompile before to deploy on heroku。

标签： html css ruby-on-rails twitter-bootstrap heroku

【解决方案1】：

听起来您的 CSS 文件的 URI 是错误的。

如果您可以包含您尝试提供的整个 HTML 页面以及 css 请求的开发工具输出，那么调试正在发生的事情会更容易。

我怀疑发生的事情是您的 application.css 的路径错误，或者您的 Web 服务器未配置为从 CSS 文件所在的任何位置提供静态文件，或两者兼而有之。

您是否使用版本控制系统（如 git）？如果是这样，您是否提交了此页面的工作版本，您能看到与 git diff 的区别吗？

如果这感觉非常冗长，我深表歉意，远程调试很棘手。不过，我们会得到它的！

编辑：

根据您发布的终端输出，即来自本地运行网络服务器的日志，您的 application.css 的 GET 请求失败。

Started GET "/application.css" for ::1 at 2015-08-04 15:26:39 -0400
ActionController::RoutingError (No route matches [GET] "/application.css"):

很遗憾，Ruby 不是我的领域，但我可以尝试提供一般性建议。

您面临的问题被称为提供静态文件（这是解决您问题的好 google food），并且根据您应用程序的配置，解决方案会有所不同。值得一读的答案是here，也许this 会有所帮助。基本上，有一个文件夹包含您的 css 文件（我猜它被称为“公共”），您需要在该目录中公开文件，以便您的网络服务器将在您包含在 html 文件中的 URL 上提供它们。您可以在本地使用终端输出来查看错误的详细信息，或者当事情被推送到 heroku 时，您可以使用 chrome 开发工具获取有关请求/响应的详细信息。您需要这些静态请求以返回 200、304 或其他一些“这里有一些数据”响应代码。

在修复本地错误之前，您不需要这个技巧，但是在 heroku 上进行生产调试时一个有用的工具是 heroku run bash。这将使您可以通过 SSH 连接到运行您在 heroku 上部署的内容的测功机，这在您需要诊断那里缺少的东西时非常有用（例如）。

更一般地说，您似乎才刚刚踏入美妙的 Web 开发世界。这真的很好，因为 webdev 非常有趣！不过，我个人认为 Ruby 并不是最友好的入门语言。它有很多根深蒂固的“魔法”，并且不会太固执己见地认为你做事是“正确的”。相比之下，当我学习时，我发现 Python + Django 是一个绝妙的组合； Python (+ Django) 让以正确的方式做事变得容易，也让你以错误的方式做事，因此更容易保持正轨。 Django 拥有惊人的文档也很有帮助。 YMMV，但当我在你所在的地方时，这是对我很重要的建议。

【讨论】：

感谢您的帮助！我添加了整个 HTML 文件，但我不确定开发工具的输出是什么，所以根据我在网上找到的内容，我认为我发布了正确的输出，但如果我发布了错误的内容，请告诉我