CSS在heroku上看起来与众不同

Question

正如您在下面的图片中看到的那样，我本地主机网站上的css在顶部的间隔比在heroku上要好得多。

之前有没有人遇到过这类问题。您可以在此页http://pltcpal.herokuapp.com/forums/

上看到最佳效果

我正在使用Twitter bootstrap，建议添加

`padding-top: 40px;` 

如果使用顶部导航栏，则

到正文。不知怎的，它不起作用......

Answer 1

问题与Heroku上资产管道的处理有关。有几种方法可以解决这个问题，请参阅http://devcenter.heroku.com/articles/rails31_heroku_cedar

我通过在我的机器上本地预编译资产然后将它们推送到Heroku来修复我的应用程序中的问题。

预编译资产：

RAILS_ENV=production bundle exec rake assets:precompile

将更改添加/提交到git repository：

git add public/assets
git commit -m "vendor compiled assets"

为了安全起见，我首先在我的机器上的本地分支上测试了整个东西，然后使用以下命令将其推送到Heroku（Heroku通常忽略除主分支之外的所有分支，因此诀窍）：

git push -f heroku heroku-assetpipeline:master

Answer 2

FWIW，我有同样的问题并检查了我能想到的一切，以及上面的那些。事实证明我必须在localhost上缩小浏览器，并且我的生产网址上有标准缩放。

就像在两个页面上重置浏览器中的缩放一样简单。希望这可以帮助其他人解决同样的问题。

Answer 3

我有同样的问题。 当我比较开发代码和生产代码时，发生在开发机器上，来自bootstrap的样式表和javascript文件都被加载，因此在生产站点（Heroku）上，只有一个应用程序-XYZ.css和一个应用程序-XYZ。 JS。

我不确定这是否可能是资产管道的问题。

可能有人会详细说明需要做什么（预先）编译资产管道，以便Heroku上的部署成功。

Answer 4

您是否有可能在某个时候在本地预编译您的资产？要强制heroku在slug编译期间编译你的资产，你可以将你的public / assets / manifest.yml重命名为public / assets / manifest.yml.bak，提交你的源代码，并推送到heroku。

Heroku假设您在看到manifest.yml文件时在本地编译了资产。

Answer 5

我遇到了同样的问题，并按照几个不同页面的说明进行操作，包括Heroku自己的文档。我在这里发帖是为了帮助下一个人，因为可能由于Rails 4，Heroku或Github的变化，但上述指示对我来说根本不起作用。但是我确实让它工作了，这就是如何做到的。

是的，您可能应该使用RAILS_ENV=production bundle exec rake assets:precompile预编译您的资产，但在此之后进入您的公共/资产＆＃39;文件夹和副本＆＃34;所有＆＃34; ＆＃39; .css＆＃39;，＆＃39; css.gz＆＃39;，＆＃39; .json＆＃39;，＆＃39; .yml＆＃39;，＆＃39; .js＆＃39;以＆＃39; application＆＃39;开头的文件或者＆＃39;显示＆＃39;。将它们移动到应用程序目录之外的文件夹中。这样做只是包装出错了。验证是否已从应用中删除所有这些文件＆public; assets / assets /＆＃39;夹。接下来重新启动本地rails服务器并验证您的应用程序仍然按照您的意图行事。然后转到您的Github帐户，进入公共/资产/＆＃39;存储库的目录并删除您刚才在本地执行的所有文件。然后在本地添加/提交，然后推送到git，然后推送到heroku，并且你已经完成了它应该正常工作。

它背后的基本原理，我认为，是因为当你推送到Heroku时，它检查你的存储库中的编译资产，因此，即使我在本地进行了预编译，它仍然从之前的提交中提取了一些资产配置。通过删除这些文件，Heroku必须在推送期间编译它们。我没有尝试过可能有用的一件事就是切换到另一个分支并删除那些文件并将该分支部署到Heroku，所以你可能想先尝试一下，但这对我有用。

另外一个注意事项，将文件重命名为.bak或.old Heroku仍然将它们视为常规并显示它们，因为原始的文件没有正确显示。