CSS在推送到heroku后不起作用，但在localhost上起作用答案

【问题标题】：CSS is not working after push to heroku but works on localhostCSS在推送到heroku后不起作用，但在localhost上起作用
【发布时间】：2013-08-27 15:21:47
【问题描述】：

Udate：完整代码在这里：https://github.com/Marc585/smartforce2

我对编码很陌生，我正在关注 onemonthrails 教程，我正在其中构建一个 pinterest 克隆。当我添加一个图像时，我们在它周围添加了一些 CSS 框，它看起来更好。它在我的本地主机上运行良好，并并排显示不同的引脚，周围有一个漂亮的小盒子。将其推送到heroku后，它只显示没有css框的图像，所有图像都在下面。！

这是它在我的本地主机上的样子：https://www.dropbox.com/s/n83kmv4kxkpu34t/Bildschirmfoto%202013-08-27%20um%2017.17.22.png

这就是它在heroku上的样子：

http://morning-shore-7790.herokuapp.com/

如果你们中的任何人能帮助我，那就太好了。非常感谢！ :)

这就是我的 styles.css.scss 的样子

   $btnPrimaryBackground: gray;
$navbarBackgroundHighlight: white;
$navbarBackground: white;

@import 'bootstrap';

body {
    padding-top: 60px;
}

@import 'bootstrap-responsive';

/* removes the shadow on the bootstrap navbar
/* .navbar-inner {
    @include box-shadow(none !important);
    border: 0;
}
*/ 
.footer {
    margin-top: 50px;
    color: $grayLight;
    a {
        color: $gray;

    }
}

/* Required for jQuery Masonry */

.box {
    margin: 5px;
    padding: 5px;
    font-size: 11px;
    line-height: 1.4em;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #444;
    width: 214px;
}

.box img {
    display: block;
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.description {
    margin: 10px 0 5px;
}
/* text i added from stackoverflow */
.box {
    float: left;
    overflow: hidden;
    background: #FFF;
    padding: 5px;
    box-shadow: 0 0 4px 0 #000;
    border-radius: 5px;
    margin: 5px;
    width: 210px;
}
#pins {
    overflow: hidden;
}
.box img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

这是 Heroku 日志给我的：

lab038:smartforce2 marcboehle$ heroku logs
2013-08-28T12:25:14.809045+00:00 app[web.1]:   Rendered layouts/_header.html.erb (1.2ms)
2013-08-28T12:25:14.809493+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:25:14.809761+00:00 app[web.1]: Completed 200 OK in 19ms (Views: 11.9ms | ActiveRecord: 5.3ms)
2013-08-28T12:25:14.805622+00:00 app[web.1]:   Rendered pins/show.html.erb within layouts/application (6.8ms)
2013-08-28T12:25:18.342441+00:00 app[web.1]: Processing by PinsController#new as HTML
2013-08-28T12:25:18.337965+00:00 app[web.1]: Started GET "/pins/new" for 144.76.104.179 at 2013-08-28 12:25:18 +0000
2013-08-28T12:25:18.357539+00:00 app[web.1]:   Rendered pins/new.html.erb within layouts/application (10.0ms)
2013-08-28T12:25:18.357201+00:00 app[web.1]:   Rendered pins/_form.html.erb (9.5ms)
2013-08-28T12:25:18.362092+00:00 app[web.1]: Completed 200 OK in 20ms (Views: 14.9ms | ActiveRecord: 2.2ms)
2013-08-28T12:25:18.361697+00:00 app[web.1]:   Rendered layouts/_header.html.erb (3.2ms)
2013-08-28T12:25:18.361904+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:25:18.369337+00:00 heroku[router]: at=info method=GET path=/pins/new host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=36ms status=304 bytes=0
2013-08-28T12:25:20.506550+00:00 app[web.1]: Started GET "/pins/new" for 144.76.104.179 at 2013-08-28 12:25:20 +0000
2013-08-28T12:25:20.512115+00:00 app[web.1]: Processing by PinsController#new as HTML
2013-08-28T12:25:20.528618+00:00 app[web.1]:   Rendered pins/new.html.erb within layouts/application (11.5ms)
2013-08-28T12:25:20.527952+00:00 app[web.1]:   Rendered pins/_form.html.erb (10.6ms)
2013-08-28T12:25:20.645683+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:25:20.646404+00:00 app[web.1]: Completed 200 OK in 134ms (Views: 129.7ms | ActiveRecord: 1.5ms)
2013-08-28T12:25:20.638394+00:00 app[web.1]:   Rendered layouts/_header.html.erb (6.9ms)
2013-08-28T12:24:32.917728+00:00 heroku[router]: at=info method=GET path=/pins/new host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=48ms status=304 bytes=0
2013-08-28T12:25:29.685579+00:00 heroku[router]: at=info method=GET path=/assets/application-4617dcc7063803b59a78ef34611326c7.css host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=9ms status=304 bytes=0
2013-08-28T12:25:29.819656+00:00 heroku[router]: at=info method=GET path=/assets/application-578246916de81579e77293bca30b8b88.js host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=7ms status=304 bytes=0
2013-08-28T12:25:42.356924+00:00 app[web.1]: Started POST "/pins" for 144.76.104.179 at 2013-08-28 12:25:42 +0000
2013-08-28T12:25:42.397427+00:00 app[web.1]: Processing by PinsController#create as HTML
2013-08-28T12:25:42.397427+00:00 app[web.1]:   Parameters: {"utf8"=>"✓", "authenticity_token"=>"IwzBviawjakndXnRHzdk6E1BNMN9T+n4UP0mXahWV1A=", "pin"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x000000050ad070 @original_filename="light-house-serene-beauty (1).jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"pin[image]\"; filename=\"light-house-serene-beauty (1).jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/tmp/RackMultipart20130828-2-obw65x>>, "image_remote_url"=>"", "description"=>"wow"}, "commit"=>"Create Pin"}
2013-08-28T12:25:42.535718+00:00 app[web.1]: Command :: identify -format '%wx%h,%[exif:orientation]' '/tmp/light-house-serene-beauty (1)20130828-2-146ct86.jpg[0]'
2013-08-28T12:25:42.649709+00:00 app[web.1]: Command :: identify -format %m '/tmp/light-house-serene-beauty (1)20130828-2-146ct86.jpg[0]'
2013-08-28T12:25:42.724516+00:00 app[web.1]: Command :: identify -format %m '/tmp/light-house-serene-beauty (1)20130828-2-146ct86.jpg[0]'
2013-08-28T12:25:42.812112+00:00 app[web.1]: Command :: identify -format %m '/tmp/light-house-serene-beauty (1)20130828-2-146ct86.jpg[0]'
2013-08-28T12:25:42.904108+00:00 app[web.1]: Command :: convert '/tmp/light-house-serene-beauty (1)20130828-2-146ct86.jpg[0]' -auto-orient -resize "320x240>" '/tmp/light-house-serene-beauty (1)20130828-2-146ct8620130828-2-12w9f83'
2013-08-28T12:25:43.243185+00:00 app[web.1]: Command :: file -b --mime '/tmp/light-house-serene-beauty (1)20130828-2-146ct8620130828-2-12w9f83'
2013-08-28T12:25:43.355248+00:00 app[web.1]: [paperclip] saving /pins/images/000/000/032/original/light-house-serene-beauty_(1).jpg
2013-08-28T12:25:43.478249+00:00 app[web.1]: [paperclip] saving /pins/images/000/000/032/medium/light-house-serene-beauty_(1).jpg
2013-08-28T12:25:43.529164+00:00 app[web.1]: Redirected to http://morning-shore-7790.herokuapp.com/pins/32
2013-08-28T12:25:43.531609+00:00 app[web.1]: [AWS S3 200 0.118428 0 retries] put_object(:acl=>:public_read,:bucket_name=>"smartforce",:content_length=>68536,:content_type=>"image/jpeg",:data=>Paperclip::UploadedFileAdapter: light-house-serene-beauty (1).jpg,:key=>"pins/images/000/000/032/original/light-house-serene-beauty_(1).jpg")  
2013-08-28T12:25:43.531609+00:00 app[web.1]: 
2013-08-28T12:25:43.529575+00:00 app[web.1]: Completed 302 Found in 1113ms (ActiveRecord: 45.1ms)
2013-08-28T12:25:43.531609+00:00 app[web.1]: [AWS S3 200 0.039553 0 retries] put_object(:acl=>:public_read,:bucket_name=>"smartforce",:content_length=>23152,:content_type=>"image/jpeg",:data=>Paperclip::FileAdapter: light-house-serene-beauty (1)20130828-2-146ct8620130828-2-12w9f83,:key=>"pins/images/000/000/032/medium/light-house-serene-beauty_(1).jpg")  
2013-08-28T12:25:43.531609+00:00 app[web.1]: 
2013-08-28T12:25:44.172166+00:00 app[web.1]: Started GET "/pins/32" for 144.76.104.179 at 2013-08-28 12:25:44 +0000
2013-08-28T12:25:44.176898+00:00 app[web.1]: Processing by PinsController#show as HTML
2013-08-28T12:25:44.177155+00:00 app[web.1]:   Parameters: {"id"=>"32"}
2013-08-28T12:25:44.205370+00:00 heroku[router]: at=info method=GET path=/pins/32 host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=2ms service=43ms status=200 bytes=2150
2013-08-28T12:25:44.191080+00:00 app[web.1]:   Rendered pins/show.html.erb within layouts/application (6.3ms)
2013-08-28T12:25:44.195464+00:00 app[web.1]:   Rendered layouts/_header.html.erb (1.2ms)
2013-08-28T12:25:44.197855+00:00 app[web.1]: Completed 200 OK in 21ms (Views: 13.8ms | ActiveRecord: 4.5ms)
2013-08-28T12:25:44.197630+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:25:45.828526+00:00 app[web.1]: Started GET "/pins/new" for 144.76.104.179 at 2013-08-28 12:25:45 +0000
2013-08-28T12:25:45.837439+00:00 app[web.1]: Processing by PinsController#new as HTML
2013-08-28T12:25:45.875244+00:00 heroku[router]: at=info method=GET path=/pins/new host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=50ms status=304 bytes=0
2013-08-28T12:25:45.868463+00:00 app[web.1]:   Rendered layouts/_header.html.erb (4.5ms)
2013-08-28T12:25:45.861930+00:00 app[web.1]:   Rendered pins/_form.html.erb (14.1ms)
2013-08-28T12:25:45.868721+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:25:45.862445+00:00 app[web.1]:   Rendered pins/new.html.erb within layouts/application (14.8ms)
2013-08-28T12:25:45.868939+00:00 app[web.1]: Completed 200 OK in 31ms (Views: 21.7ms | ActiveRecord: 7.0ms)
2013-08-28T12:25:55.829813+00:00 app[web.1]: Started POST "/pins" for 144.76.104.179 at 2013-08-28 12:25:55 +0000
2013-08-28T12:25:55.839079+00:00 app[web.1]: Processing by PinsController#create as HTML
2013-08-28T12:25:55.839424+00:00 app[web.1]:   Parameters: {"utf8"=>"✓", "authenticity_token"=>"IwzBviawjakndXnRHzdk6E1BNMN9T+n4UP0mXahWV1A=", "pin"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00000006030268 @original_filename="182767_311107028978722_1396522434_n.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"pin[image]\"; filename=\"182767_311107028978722_1396522434_n.jpeg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/tmp/RackMultipart20130828-2-25570i>>, "image_remote_url"=>"", "description"=>"cool"}, "commit"=>"Create Pin"}
2013-08-28T12:25:55.855710+00:00 app[web.1]: Command :: identify -format '%wx%h,%[exif:orientation]' '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn.jpeg[0]'
2013-08-28T12:25:55.984557+00:00 app[web.1]: Command :: identify -format %m '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn.jpeg[0]'
2013-08-28T12:25:56.082265+00:00 app[web.1]: Command :: identify -format %m '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn.jpeg[0]'
2013-08-28T12:25:56.173832+00:00 app[web.1]: Command :: identify -format %m '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn.jpeg[0]'
2013-08-28T12:25:56.351059+00:00 app[web.1]: Command :: convert '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn.jpeg[0]' -auto-orient -resize "320x240>" '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn20130828-2-1iemdd5'
2013-08-28T12:25:56.578210+00:00 app[web.1]: Command :: file -b --mime '/tmp/182767_311107028978722_1396522434_n20130828-2-ud07nn20130828-2-1iemdd5'
2013-08-28T12:25:56.672068+00:00 app[web.1]: [paperclip] saving /pins/images/000/000/033/original/182767_311107028978722_1396522434_n.jpeg
2013-08-28T12:25:56.791839+00:00 app[web.1]: [paperclip] saving /pins/images/000/000/033/medium/182767_311107028978722_1396522434_n.jpeg
2013-08-28T12:25:56.836065+00:00 app[web.1]: Completed 302 Found in 996ms (ActiveRecord: 15.2ms)
2013-08-28T12:25:56.837241+00:00 app[web.1]: [AWS S3 200 0.031222 0 retries] put_object(:acl=>:public_read,:bucket_name=>"smartforce",:content_length=>17801,:content_type=>"image/jpeg",:data=>Paperclip::FileAdapter: 182767_311107028978722_1396522434_n20130828-2-ud07nn20130828-2-1iemdd5,:key=>"pins/images/000/000/033/medium/182767_311107028978722_1396522434_n.jpeg")  
2013-08-28T12:25:56.835593+00:00 app[web.1]: Redirected to http://morning-shore-7790.herokuapp.com/pins/33
2013-08-28T12:25:56.837241+00:00 app[web.1]: 
2013-08-28T12:25:56.837241+00:00 app[web.1]: [AWS S3 200 0.110758 0 retries] put_object(:acl=>:public_read,:bucket_name=>"smartforce",:content_length=>117931,:content_type=>"image/jpeg",:data=>Paperclip::UploadedFileAdapter: 182767_311107028978722_1396522434_n.jpeg,:key=>"pins/images/000/000/033/original/182767_311107028978722_1396522434_n.jpeg")  
2013-08-28T12:25:56.837241+00:00 app[web.1]: 
2013-08-28T12:25:56.845399+00:00 heroku[router]: at=info method=POST path=/pins host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=1616ms status=302 bytes=113
2013-08-28T12:25:57.147150+00:00 app[web.1]:   Parameters: {"id"=>"33"}
2013-08-28T12:25:57.142656+00:00 app[web.1]: Started GET "/pins/33" for 144.76.104.179 at 2013-08-28 12:25:57 +0000
2013-08-28T12:25:57.147150+00:00 app[web.1]: Processing by PinsController#show as HTML
2013-08-28T12:25:57.169935+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:25:57.165846+00:00 app[web.1]:   Rendered pins/show.html.erb within layouts/application (3.8ms)
2013-08-28T12:25:57.170291+00:00 app[web.1]: Completed 200 OK in 23ms (Views: 9.3ms | ActiveRecord: 10.1ms)
2013-08-28T12:25:57.169410+00:00 app[web.1]:   Rendered layouts/_header.html.erb (2.1ms)
2013-08-28T12:25:57.178983+00:00 heroku[router]: at=info method=GET path=/pins/33 host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=3ms service=46ms status=200 bytes=2164
2013-08-28T12:25:57.449480+00:00 heroku[router]: at=info method=GET path=/assets/application-4617dcc7063803b59a78ef34611326c7.css host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=2ms service=13ms status=304 bytes=0
2013-08-28T12:25:57.545688+00:00 heroku[router]: at=info method=GET path=/assets/application-578246916de81579e77293bca30b8b88.js host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=6ms status=304 bytes=0
2013-08-28T12:26:01.841856+00:00 heroku[router]: at=info method=GET path=/favicon.ico host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=6ms status=304 bytes=0
2013-08-28T12:24:12.297639+00:00 heroku[router]: at=info method=GET path=/assets/application-578246916de81579e77293bca30b8b88.js host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=2ms service=25ms status=304 bytes=0
2013-08-28T12:26:40.341958+00:00 app[web.1]: Started GET "/" for 144.76.97.109 at 2013-08-28 12:26:40 +0000
2013-08-28T12:26:40.346501+00:00 app[web.1]: Processing by PinsController#index as HTML
2013-08-28T12:26:40.352608+00:00 app[web.1]:   Rendered pages/_home.html.erb (4.3ms)
2013-08-28T12:26:40.474587+00:00 app[web.1]:   Rendered pins/_pin.html.erb (113.2ms)
2013-08-28T12:26:40.480638+00:00 app[web.1]:   Rendered layouts/_header.html.erb (1.0ms)
2013-08-28T12:26:40.478430+00:00 app[web.1]:   Rendered pins/index.html.erb within layouts/application (130.3ms)
2013-08-28T12:26:40.482192+00:00 app[web.1]: Completed 200 OK in 135ms (Views: 122.6ms | ActiveRecord: 12.0ms)
2013-08-28T12:26:40.481982+00:00 app[web.1]:   Rendered layouts/_footer.html.erb (0.1ms)
2013-08-28T12:26:40.487539+00:00 heroku[router]: at=info method=GET path=/ host=morning-shore-7790.herokuapp.com fwd="144.76.97.109" dyno=web.1 connect=1ms service=158ms status=200 bytes=11856
2013-08-28T12:26:40.898579+00:00 heroku[router]: at=info method=GET path=/assets/application-4617dcc7063803b59a78ef34611326c7.css host=morning-shore-7790.herokuapp.com fwd="144.76.97.109" dyno=web.1 connect=1ms service=9ms status=304 bytes=0
2013-08-28T12:26:43.564205+00:00 heroku[router]: at=info method=GET path=/favicon.ico host=morning-shore-7790.herokuapp.com fwd="144.76.97.109" dyno=web.1 connect=3ms service=7ms status=304 bytes=0
2013-08-28T12:24:55.793681+00:00 heroku[router]: at=info method=POST path=/pins host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=9488ms status=302 bytes=113
2013-08-28T12:25:20.653233+00:00 heroku[router]: at=info method=GET path=/pins/new host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=151ms status=200 bytes=3154
2013-08-28T12:26:41.008748+00:00 heroku[router]: at=info method=GET path=/assets/application-578246916de81579e77293bca30b8b88.js host=morning-shore-7790.herokuapp.com fwd="144.76.97.109" dyno=web.1 connect=1ms service=12ms status=304 bytes=0
2013-08-28T12:25:30.218412+00:00 heroku[router]: at=info method=GET path=/favicon.ico host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=2ms service=13ms status=304 bytes=0
2013-08-28T12:25:43.539031+00:00 heroku[router]: at=info method=POST path=/pins host=morning-shore-7790.herokuapp.com fwd="144.76.104.179" dyno=web.1 connect=1ms service=2686ms status=302 bytes=113

【问题讨论】：

检查你的应用日志可能对heroku logs有帮助
@maximus 不幸的是我不知道，我要寻找什么。我找不到任何具体的错误。我添加了 heroku 日志和我的 github 存储库。也许你可以看看？那太棒了。

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

【解决方案1】：

有很多缺失的 CSS 代码...将其添加到您的主 样式表 文件中

.box {
    float: left;
    overflow: hidden;
    background: #FFF;
    padding: 5px;
    box-shadow: 0 0 4px 0 #000;
    border-radius: 5px;
    margin: 5px;
    width: 210px;
}
#pins {
    overflow: hidden;
}
.box img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

它会像这样http://d.pr/i/rwce

【讨论】：

感谢@jason，我在上面附上了我的样式表代码。不幸的是，它在 heroku 上仍然看起来像以前一样，并且在我的本地主机上看起来仍然如此。反正我不明白为什么它会显示 2 种不同的视图。我把它放在正确的位置还是需要放在文件中的其他地方？
有一个错误的注释标签被放置在你的css文件上看看d.pr/i/LxYS去你的heroku服务器并尝试在assets文件夹中找到application-4617dcc7063803b59a78ef34611326c7.css并用这个文件替换它d.pr/f/UGLR
对不起，我还是不明白。我如何访问我的 heroku 服务器？在我的 heroku 帐户中，我可以看到我上次部署的时间。在我在 github 上的资产文件夹中，我只有 4 个 css 文件。 github.com/Marc585/smartforce2/tree/master/app/assets我刚开始使用 ROR，所以我不太确定现在该做什么。
我添加了我的 github repo 和 heroku 日志。我无法弄清楚缺少什么。如果您有任何其他想法，那就太好了。非常感谢！

【解决方案2】：

当我在您的 Heroku 页面中进行元素检查时，我确实看到了样式的变化（填充 5px ....）您是否检查过您是否更新了预编译的资产（因为我看到您有应用程序。 ...css 是我们的标题。您应该尝试使用以下命令：

RAILS_ENV=production bundle exec rake assets:precompile

更多details on the Heroku asset pipeline.

【讨论】：