Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use lqip-loader and css-loader at the same time? #18

Open
UwUnyaa opened this issue Jan 25, 2019 · 1 comment
Open

How to use lqip-loader and css-loader at the same time? #18

UwUnyaa opened this issue Jan 25, 2019 · 1 comment

Comments

@UwUnyaa
Copy link

UwUnyaa commented Jan 25, 2019

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)?

@UwUnyaa
Copy link
Author

UwUnyaa commented Feb 19, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant