Esbuild not compiling app.css via mix tasks

Phoenix Forum Questions / Help
, ,
1

I have a fairly straightforward Dart-Sass setup:

config :dart_sass,
  version: "1.54.5",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)
  ]

With these mix tasks:

      "assets.build": ["esbuild MyApp"],
      "assets.deploy": [
        "esbuild MyApp --minify",
        "phx.digest"
      ]

When I start the server an priv/static/assets/app.css file is created from my sass files. However when I run either mix assets.build or mix assets.deploy no app.css file is created. Because these static assets are created when I run the development server I don’t really notice it locally, but when I deploy to Fly there is no style since app.css is missing.

Any thoughts on this? I’d be less perturbed about the mix tasks failing to generate app.css but I think that’s the reason the stylesheets are broken in production.

2

Ah! Upgrading the Sass version and adding sass default --no-source-map --style=compressed to the mix task.

 defp aliases do
    [
     ...
      "assets.deploy": [
        "esbuild MyApp --minify",
        "sass default --no-source-map --style=compressed",
        "phx.digest"
      ]
    ]
1 Like
3

See, incantations like these is what is firmly keeping me away from frontend work. :smiley:

1 Like