Skip to content

CSS background url() not displaying image in dev mode #27

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

Closed
samhh opened this issue Sep 23, 2016 · 4 comments
Closed

CSS background url() not displaying image in dev mode #27

samhh opened this issue Sep 23, 2016 · 4 comments
Labels

Comments

@samhh
Copy link
Contributor

samhh commented Sep 23, 2016

In production mode with built files they do show, however, and in the CSS in the browser dev tools the path looks the same.

@samhh samhh added the bug label Sep 23, 2016
@samhh
Copy link
Contributor Author

samhh commented Sep 23, 2016

The image is not even loaded under the network tab. For clarity:

This works (incl/ BrowserSync port): url('http://localhost:5000/assets/img/image.png')

However this does not: url('/assets/img/image.png')

@samhh
Copy link
Contributor Author

samhh commented Sep 23, 2016

This is specifically caused by the source maps in Webpack, see (incl/ related): webpack-contrib/style-loader#55

@samhh
Copy link
Contributor Author

samhh commented Sep 23, 2016

This can be fixed by changing the following in webpack.config.js (no need to touch production config) under CSS loaders: style to style?fixUrls

And changing the npm dependency for style-loader to bendytree/style-loader (npm i -D bendytree/style-loader)

That's a fork of the project with the fixUrls query string implemented. Switch back to standard style-loader once it's fixed there.

@samhh
Copy link
Contributor Author

samhh commented Sep 23, 2016

60cd76a

@samhh samhh closed this as completed Sep 23, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant