How to use lqip-loader and css-loader at the same time?
Opened this issue · 1 comments
I've set up lqip-loader in a project I'm working on to add lazy loading of images with LQIP with content imported via Webpack. After making changes to my React components which happen to use these images, they work correctly.
My problem is that references to images in (s)css (for instance, url() in background-image end up getting mangled into [object Object] which makes sense considering how Webpack works, but it's obviously a huge problem. Right now I'm considering writing a loader that looks whether the previous loader returned an Object that looks like something from this loader, and gets the src property of it to get the URL.
I've tried looking for solutions to the problem of this kind, but I haven't managed to find anything. I think this is a big issue (and it makes this loader unusable to quite a lot of people). Shouldn't there be some information about this in the readme with a possible workaround (maybe something like what I've mentioned abve, I haven't tried it yet myself)?
A quick workaround is to use webpack loader imports, in this case they will end up looking like this: lqip-loader!./path/to/my/image. Some configurations might require disabling lint rules to permit use of webpack loader import syntax.