Issue integrating Leaflet JS library: PNGs referenced in leaflet stylesheet


The Sage theme that we’re working with is using @roots/bud 6.6.9. I’m currently working on a requirement to inject an OSM/Leaflet based map into a single CPT view and showing a marker based on lat/lng data stored in a custom field. The lat/lng variables are injected inline using bundle()->inline().

This part is working correctly. Also, I’ve added leaflet as a dependency in my package.json file and imported it into a Javascript module for the maps functionality.

For Leaflet’s CSS dependencies, I’m conditionally enqueueing a stylesheet only for the single CPT views that require the map. The SASS file is importing the asset directly from the node_modules folder:

// Import Leaflet styles
@import 'leaflet/dist/leaflet.css';

While this is working correctly, I’ve encountered an issue with some rules in leaflet’s CSS that point to image assets used as background-images for controls and markers:

.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);

This caused errors when compiling using bud since it was looking for these PNGs locally in resources/images. I was inspired by @kellymears solution here and tried to copy the leaflet image assets into the theme’s images folder:

await app.fs.copy(
    {overwrite: true},

While this works locally in development, on build the appended content hash for cache busting on leaflet’s image assets in public/images is breaking the marker icons.

I’m wondering if there is:

a) A better way to deal with images in modules referenced in stylesheets using relative urls like this

b) Or a way to exclude specific images from having a filehash appended during the build process?

Found @strarsis solution here. For excluding assets from file hashing.

Though this looks like a known issue using Leaflet with webpack and css-loader.

When investigating the img src, it looks like it’s looking for a relative URL:

<img src="marker-icon-2x.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(329px, 256px, 0px); z-index: 256;">

So even if you’re able to exclude these files from hashing, it won’t work. :frowning_face:

So the issue is with how the leaflet doesn’t support webpack, but there’s a readymade solution to use a plugin.