Hi!
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(
app.path(`@modules/leaflet/dist/images`),
app.path(`@src/images`),
{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?
