Disable rails from embedding background images into CSS - css

Question

I have some fonts with #font-face and background images into my custom.css.scss file.
When I precompile assets for Heroku, I get a production css larger than 10MB which slows my website down to a crawl. Upon further inspection I discovered that the images and fonts are base64 encoded within the generated production css file. How do I disable this?
Some code from custom.css.scss:
#font-face {
font-family: 'OpenSansCondensedLight';
src: asset-data-url('opensans-condlight.eot');
src: asset-data-url('opensans-condlight.eot') format('embedded-opentype'),
asset-data-url('opensans-condlight.woff') format('woff'),
asset-data-url('opensans-condlight.ttf') format('truetype'),
asset-data-url('opensans-condlight.svg') format('svg');
font-variant: normal;
font-weight: normal;
font-style: normal;
}
becomes in production CSS file:
#font-face {
font-family: 'OpenSansCondensedLight';
src: url(data:application/vnd.ms-fontobject;base64,nM8BALTOAQABAAIAAAAAAAILAwYDBQQCAgQBACwB...
src: url(data:application/vnd.ms-fontobject;base64,nM8BALTOAQABAAIAAAAAAAILAwYDBQQCAgQBACwB...
font-variant: normal;
font-weight: normal;
font-style: normal; }

Answer 1

if you use asset-data-url sass will inline your assets as base64 data. that's the whole point.
you need to use asset-path($relative-asset-path, $asset-class) or similar methods to reference the asset from your css file: https://github.com/rails/sass-rails#features
if that does not work on heroku, make sure to check all the configurations: https://devcenter.heroku.com/articles/rails-asset-pipeline