How do I deploy SASS with Phoenix 1.7 and esbuild using Bulma and 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.