Hey!
We are running a site with quite good traffic (http://www.anses.gob.ar, 8MM users/month) and we are extremely happy with Middleman.
Webpack 2 is our external pipeline and we setup asset hashing (the middleman one). We have a few background images in our css, and I don’t know how to properly call the images in css so that the asset hashing works in our case. I do understand the disconnection about web pack and asset hashing, but Im unable to fix it 
regards
You could use <%= image_tag 'img_name.ext' %> to do that, since the helper will take asset hash into account when it mounts the final image path.
Thanks for your reply.
Actually using background-image: url(<%= image_tag 'fondo.jpg'%>); in the .scss file is not working. The error is somewhere in the docker log:
web_1 | == Running manipulator: collections (110)
web_1 | == Running manipulator: routing (130)
web_1 | /site/node_modules/css/lib/parse/index.js:72
web_1 | throw err;
web_1 | ^
web_1 |
web_1 | Error: undefined:1:34: property missing ':'
web_1 | at error (/site/node_modules/css/lib/parse/index.js:62:15)
web_1 | at declaration (/site/node_modules/css/lib/parse/index.js:223:33)
web_1 | at declarations (/site/node_modules/css/lib/parse/index.js:252:19)
web_1 | at rule (/site/node_modules/css/lib/parse/index.js:560:21)
web_1 | at rules (/site/node_modules/css/lib/parse/index.js:117:70)
web_1 | at stylesheet (/site/node_modules/css/lib/parse/index.js:81:21)
web_1 | at module.exports (/site/node_modules/css/lib/parse/index.js:564:20)
web_1 | at rework (/site/node_modules/rework/index.js:27:21)
web_1 | at CssTreeWalker.beginReading (/site/node_modules/purify-css/lib/purifycss.js:568:24)
web_1 | at purify (/site/node_modules/purify-css/lib/purifycss.js:1009:10)
web_1 | at /site/node_modules/purifycss-webpack/dist/index.js:95:99
web_1 | at Array.forEach (<anonymous>)
web_1 | at /site/node_modules/purifycss-webpack/dist/index.js:81:28
web_1 | at Array.forEach (<anonymous>)
web_1 | at Compilation.<anonymous> (/site/node_modules/purifycss-webpack/dist/index.js:65:30)
web_1 | at next (/site/node_modules/tapable/lib/Tapable.js:204:14)
web_1 | at ExtractTextPlugin.<anonymous> (/site/node_modules/extract-text-webpack-plugin/index.js:345:4)
web_1 | at Compilation.applyPluginsAsyncSeries (/site/node_modules/tapable/lib/Tapable.js:206:13)
web_1 | at sealPart2 (/site/node_modules/webpack/lib/Compilation.js:631:9)
web_1 | at next (/site/node_modules/tapable/lib/Tapable.js:202:11)
web_1 | at Compilation.compilation.plugin (/site/node_modules/webpack/lib/ProgressPlugin.js:109:6)
web_1 | at next (/site/node_modules/tapable/lib/Tapable.js:204:14)
web_1 | at ExtractTextPlugin.<anonymous> (/site/node_modules/extract-text-webpack-plugin/index.js:317:5)
web_1 | at /site/node_modules/async/dist/async.js:421:16
web_1 | at iteratorCallback (/site/node_modules/async/dist/async.js:998:13)
web_1 | at /site/node_modules/async/dist/async.js:906:16
web_1 | at /site/node_modules/extract-text-webpack-plugin/index.js:301:6
web_1 | at /site/node_modules/async/dist/async.js:421:16
web_1 | at iteratorCallback (/site/node_modules/async/dist/async.js:998:13)
web_1 | at /site/node_modules/async/dist/async.js:906:16
web_1 | == External: Command failed with non-zero exit status
site_web_1 exited with code 1
As far as I understand, the .scss is managed by the Webpack2 plugin, and that’s the reason it doesn’t understand how to process Middleman’s image_tag helper.
Please correct me if i’m wrong.
Kind regards
@michael, @eeml, did you find a solution for this? Thank you!
Currently I use webpack for JS only and use the build-in asset pipeline with the scssc gem but am wondering if there’s a webpack-only solution.
In the scss file we have the following and its working.
background-image: url(/assets/img/fondo.jpg);
Sorry for not replying sooner.
This looks like a direct reference to the image. Do you get asset hashing with this code?