If you would like to migrate away from node/npm/webpack while still using sass, the dart_sass package provides a installer and runner for Dart Sass via Mix.

This package follows the same structure esbuild– you add your configuration to config.exs:

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

and then you can run it from your command line:

$ mix sass default --version
1.36.0

For any Phoenix projects currently using Sass via webpack, you can use dart_sass to model your asset pipeline in the upcoming style of the Phoenix v1.6 installer.

First, add DartSass as a watcher in config/dev.exs:

sass: {
    DartSass,
    :install_and_run,
    [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
  }

Note: this requires Phoenix > v1.5.9.

…and then create or add sass to your "assets.deploy" alias in mix.exs:

"assets.deploy": ["sass default --no-source-map --style=compressed", "phx.digest"]

You may refer to the README for more details, and if you are using dart_sass in a project, please let us know!

https://github.com/CargoSense/dart_sass