1. 技术文章
  2. CSS is not working after push to heroku but works on localhost

CSS is not working after push to heroku but works on localhost

由 风流意气都作罢 提交于 2020-01-06 15:09:14

问题


Udate: the complete code is here: https://github.com/Marc585/smartforce2

I'm pretty new to coding and i'm following the onemonthrails tutorial where i'm building a pinterest clone. When i add an image we added some css box arround it that it looks nicer. it works fine on my localhost and shows different pins side by side with a nice little box arround it. After pushing it to heroku it only shows the image without the css box and all images are below.!

This is how it looks on my localhost:https://www.dropbox.com/s/n83kmv4kxkpu34t/Bildschirmfoto%202013-08-27%20um%2017.17.22.png

and this is how it looks on heroku: 

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

would be great if any of you could help me with that. Thanks a lot! :)

This is how my styles.css.scss looks like

   $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;
}

This is what Heroku logs gives me:

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

回答1:


There is a lot of missing CSS codes ... add this to your main stylesheet file 

.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;
}

and it will appear like this http://d.pr/i/rwce




回答2:


When I do a element inspection in your Heroku page, I do see the change in style (padding 5px....) Did you check that you are update you pre-compiled assets (as I see you have the application....css is our header. You should give a shot at using the following command :

RAILS_ENV=production bundle exec rake assets:precompile

More details on the Heroku asset pipeline .



来源：https://stackoverflow.com/questions/18469559/css-is-not-working-after-push-to-heroku-but-works-on-localhost

标签
css
ruby-on-rails
twitter-bootstrap
heroku
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!