Correctly loading an external npm dep (Leaflet)

I want to add a Leaflet map, without loading some js and css from external parties.

I followed Asset Management — Phoenix v1.8.8

First I tried the suggested option 3:
{:leaflet, github: "Leaflet/Leaflet", app: false, compile: false}

mix deps.get retrieves it correctly, but importing it in app.js fails (could not be resolved).

After I tried the other option (instaling into assets with npm)
Here I could import the js, but importing the css fails:

import 'leaflet/dist/leaflet.css';

which fails with
✘ [ERROR] No loader is configured for ".png" files: node_modules/leaflet/dist/images/marker-icon.png

as suggested somewhere I modify the following to dev.exs

  watchers: [
    esbuild:
      {Esbuild, :install_and_run,
       [:case_manager, ~w(--sourcemap=inline --watch --loader:.png=file)]},

this compiles, but obviously its looking for the files in the wrong place:

[debug] ** (Ecto.NoResultsError) expected at least one result but got none in query:
from c0 in App.Entries.Entry,
  where: c0.id == ^"marker-icon-2x.png"

omg, its trying to load the assets through ecto!

i am at a loss. How is this being done the correct way?