CSS在heroku上看起來不一樣

Question

正如您在下面的圖片中看到的，我的本地主機網站上的css在頂部的間隔比在heroku上要好得多。

有沒有人有過這種類型的問題。你可以看到最好在此頁面http://pltcpal.herokuapp.com/forums/

我使用Twitter的引導，其中建議如果使用頂部導航欄添加

`padding-top: 40px;` 

身體上。不知怎的，它不工作...

Answer 1

問題與處理Heroku上的資產管道有關。有幾種方式可以解決這個問題，請參閱http://devcenter.heroku.com/articles/rails31_heroku_cedar

我在我的應用程序中通過預先編譯我的機器上的資產並將它們推送到Heroku來解決了問題。

預編譯的資產：

RAILS_ENV=production bundle exec rake assets:precompile 

添加/更改提交到Git資源庫：

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

要我先其測試的本地分支整個事情在我的機器上的安全我使用以下命令（Heroku通常忽略除主分支以外的所有分支）推送到Heroku：

git push -f heroku heroku-assetpipeline:master 

Answer 2

我有同樣的問題。 當我比較開發和生產代碼時，發生在開發機器上的bootstrap樣式表和JavaScript文件都被加載，因此在生產站點（Heroku）上只有一個應用程序-XYZ.css和一個應用程序-XYZ .js文件。

我不確定這是否會成爲資產管道的問題。

可能有人可能會詳細說明需要做什麼來（預）編譯資產管道，以便在Heroku上部署成功。

Answer 3

FWIW，我有這個相同的問題，並檢查了我能想到的一切，以及上面的那些。事實證明，我必須在我的瀏覽器中放大本地主機時，我的標準縮放我的生產網址。

這與在兩頁上重置瀏覽器中的縮放一樣簡單。希望這可以幫助其他人解決同樣的問題。

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預編譯你的資產，但在此之後，進入你的'公共/資產'文件夾並複製「所有」'.css'，'css.gz'，'.json'，'.yml' ，'.js'文件以'application'或'manifest'開頭。將它們移動到應用程序目錄之外的文件夾中。這樣做只是爲了防止出現任何問題。確認所有這些文件都從應用程序的「public/assets /」文件夾中刪除。接下來重新啓動您的本地Rails服務器並驗證您的應用仍然按照您的意圖運行。然後轉到您的Github帳戶並進入存儲庫的「public/assets /」目錄，並刪除您剛剛在本地執行的所有相同文件。然後在本地添加/提交，然後推送到git，然後到heroku，並且walla完成了它應該工作。

它的基本原理，我假設，是因爲當你推到Heroku時，它檢查你的倉庫中的編譯資產，因此，即使我本地預編譯過，它仍然從之前的提交中提取一些資產配置。通過刪除這些文件，Heroku必須在推送過程中編譯它們。有一件事我沒有嘗試，可能會工作只是切換到另一個分支並刪除這些文件，並將該分支部署到Heroku，所以你可能想先嚐試，但這是對我來說。

另外一個注意事項是，將文件重命名爲.bak或.old Heroku仍將它們視爲常客，並將它們顯示爲原始文件不能正常顯示。