Asset paths in CSS

README says:

Webpack finds all relative module references in CSS (they start with ./) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.

But what should I do if the assets are not located in the same directory as the CSS files? All my assets are in src/assets/..., but CSS files can be in other folders as well. Neither ./assets/... nor ../assets/... seems to work.

[doronnac]

~assets/... should do the trick

[gaearon]

I think this is expected, even if a bit counter-intuitive.

Webpack treats URLs like stuff/a.jpg in CSS as relative (./) because that’s how existing CSS stylesheets work. If it didn’t, it would be very hard to reuse existing CSS code in webpack (e.g. from CSS libraries or even from existing apps migrating to webpack).

I don’t see us fixing it, as it would create more issues. As suggested by @doronnac, you can explicitly tell webpack to use its resolution by prepending the path with ~: https://github.com/facebookincubator/create-react-app/issues/3582#issuecomment-353965421. I verified this works.