Deploying SASS with Phoenix 1.7 & esbuild using Bulma & SASS

How could you use SASS with Phoenix 1.7, Bulma and esbuild?

Start with your mix.exs to make sure assets get built in priv/static/assets:

defp aliases do
[
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate", "start_stripe_mock", "test"],
"assets.deploy": [
"esbuild default --minify",
"sass default --no-source-map --style=compressed",
"phx.digest"
]
]
end

This is assuming that your CSS and JS are built separately with dart_sass and esbuild respectively.

The question becomes, what do I need to do to make sure CSS assets are built when I deploy? (or make sure they get deployed with the app?)

One example that helps is Gigalixir's Magenta example.

The key in the above example is the assets/package.json file. It calls mix assets deploy when npm deploy is called.

So your .json would look like:

/assets/package.json:

{
"scripts": {
"deploy": "cd .. && mix assets.deploy && rm -f _build/esbuild"
}
}

and mix.exs to build the sass assets:

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

As always, if you hit any issues, we're one email away to help. Just write us at Gigalixir Elixir Support.