Esbuild is little different from webpack. Phoenix docs added a new section Asset Management in 1.6 and it recommends the following.
Finally, all other assets, that usually don’t have to be preprocessed, go directly to “priv/static”.
Note: You have to copy those images, fonts, etc directly to respective folders in priv/static folder instead of keeping them in assets folder.
Images, fonts and external files section details about how to deal with images, etc. It recommends using --external flag.
Few observations when using esbuild:
- you can configure a loader for a file type in esbuild, example
--loader:.gif=fileif esbuild has to copy the file. esbuild - Content Types. (phoenix recommends that assets which don’t require preprocessing to be directly in/priv/static- in that case this might not be required)
watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.svg=text --loader:.eot=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file)]}
]
-
or use
--external:/images/*and referring to them with absolute paths like/images/*- esbuild - API. -
configure DartSass to process the SCSS file. EsBuild wont handle scss file and css file is generated by DartSass in
priv/staticfolder.
config :dart_sass,
version: "1.49.0",
default: [
args: ~w(--error-css vendor/bootstrap_docs/scss/docs.scss ../priv/static/assets/docs.css),
cd: Path.expand("../assets", __DIR__)
]
I would use DartSass if I am dealing with SCSS files.
