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.