SArthur

Phx 1.5 to 1.6, ESbuild + SCSS roadblock

Greetings from new member with >1yr phoenix/elixir experience.

I’m working through the upgrade of my phoenix app from 1.5 to 1.6.6 and am stuck on the following error pertaining to local assets. After following the boilerplate instructions, I was getting the same type of error code for my SCSS file. But with the help of my weekly tutor/coach/chief roadblock-unblocker, we’ve been able to that to load. We’re stumped on this one, though. The app uses SCSS, but not particularly Tailwind or Dart.

'✘ [ERROR] No loader is configured for “.jpg” files: static/images/marketplace.jpg

css/app.scss:2600:20:
  2600 │   background-image: url(../static/images/marketplace.jpg);
       ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for “.gif” files: static/images/loading_spinner.gif

css/app.scss:4071:24:
  4071 │   background-image: url("../static/images/loading_spinner.gif");
       ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2 errors
’

I suspect this is not enough information to troubleshoot the unique setup of the app, which was developed by a team of pros. So I think my ask is for strategic guidance on our options:

Work to integrate something like Tailwind, which I’m told has its share of qwerks.
Stay the course and try to figure out the current roadblock.
Other thoughtful suggestions?

I really appreciate this community. The Phoenix/elixir framework makes web-development more accessible and fun, imo.

8 comments

/phoenix #esbuild #scss

4 2646 8

2022-02-20 03:25:57 UTC

Marked As Solved

kartheek

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=file if 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/static folder.

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.

Post #5

Also Liked

al2o3cr

This sounds very similar to the issue discussed in this thread:

See the PR linked in that message for details; sounds like there’s a config option needed for esbuild.

Post #2

SArthur

Ok, problems appear to be solved. I am still learning many of the basics and I often don’t immediately undestand the documentation.

I should have clarified in my last note that the ‘in the css’ and ‘in the html’ paths were taken from the output in chrome inspect, not the code. The paths in the html templates are as you suggest. In the css, it is using a url(), which I’m thinking is because the css gets set up by the sass plugin such that the static path doesn’t work.

So to close the loop, the one step that I hadn’t done was move the images folder over to priv/assets. This is because it was already there. Or at least it was already there on my local machine. The jpgs that were working did so because of the url() path that referenced the legacy assets folder, but everythign else was using the static_paths pointing to /priv/static/ which is no longer being built at compilation automatically. So I deleted the legacy priv/static/ and copied it newly from the legacy assets/static. Then I updated the .gitignore to include the /priv/static but exclude /priv/static/assets/, as I’ve found noted in a couple posts here and there.

This experience definitely helped me to better understand more of how the Phoenix framework comes together. Thank you very much for the help!

Post #9