why image-path is not resolved in scss?

Question

in my app, I have a scss file, resulted from a gem, resident in the gem folder out side of my app project folder

in works just fine locally, I have the path to images correct, like this: (copied from element inspector at chrome)

media="all"
.social-share-button-twitter {
display: inline-block;
width: 16px;
height: 16px;
background: url("/assets/sprites/social-share-button.png") 0px -48px no-repeat;
}

but, when I deploy to heroku, the image-path is not resolved, I get this result:

media="all"
.social-share-button-twitter {
display: inline-block;
width: 16px;
height: 16px;
background: url(image-path("sprites/social-share-button.png")) 0px -48px no-repeat;
}

notice the url above, of course it will not point to the png image.

here is how its in the scss file:

.social-share-button-baidu { display:inline-block; width: 16px; height: 16px; background: url(image-path('sprites/social-share-button.png')) 0px 0px no-repeat }

Any idea why I get the wrong path at the deployed app ?

How can I force rails to use another scss file instead of the file at the gem folder ? I tried to set another file in the application.css but, rails keep using the file at the gem folder.

Any idea ? why its works fine locally ?

Answer 1

If it is scss and not compass then it would go like this (look at where you sprites folder is compared to your scss file)

.social-share-button-baidu 
{ 
   display:inline-block; 
   width: 16px; 
   height: 16px; 
   background: url(../sprites/social-share-button.png) 0px 0px no-repeat;
}

../ takes you up out of one folder, can you see the sprites folder from there?