Commit d0720e6143de69ce13a7a8f6517a54524b3855e8
2021-07-25T00:04:46
Show how to add dart_sass to apps w/ Phoenix
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
diff --git a/README.md b/README.md
index 1c5f660..fc1492c 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ dart_sass version of choice:
config :dart_sass, version: "1.36.0"
```
-Now you can install sass by running:
+Now you can install dart-sass by running:
```bash
$ mix sass.install
@@ -58,7 +58,7 @@ The executable may be kept at `_build/sass`. However in most cases
running dart-sass requires two files: the portable Dart VM is kept at
`_build/dart` and the Sass snapshot is kept at `_build/sass.snapshot`.
-### Profiles
+## Profiles
The first argument to `dart_sass` is the execution profile.
You can define multiple execution profiles with the current
@@ -77,6 +77,52 @@ config :dart_sass,
When `mix sass default` is invoked, the task arguments will be appended
to the ones configured above.
+## Adding to Phoenix
+
+To add `dart_sass` to an application using Phoenix, you need only four steps.
+
+First add it as a dependency in your `mix.exs`:
+
+```elixir
+def deps do
+ [
+ {:dart_sass, "~> 0.1", runtime: Mix.env() == :dev}
+ ]
+end
+```
+
+Now let's configure `dart_sass` to use `assets/css/app.scss` as the input file and
+compile CSS to the output location `priv/static/assets/app.css`:
+
+```elixir
+config :dart_sass,
+ version: "1.36.0",
+ default: [
+ args: ~w(css/app.scss ../priv/static/assets/app.css),
+ cd: Path.expand("../assets", __DIR__)
+ ]
+```
+
+> Make sure the "assets" directory from priv/static is listed in the
+> :only option for Plug.Static in your endpoint file at,
+> for instance `lib/my_app_web/endpoint.ex`.
+
+For development, we want to enable watch mode. So find the `watchers`
+configuration in your `config/dev.exs` and add:
+
+```elixir
+ sass: {DartSass, :install_and_run, [:default, ~w(--embed-source-map --watch)]}
+```
+
+Note we are embedding source maps and enabling the file system watcher.
+
+Finally, back in your `mix.exs`, make sure you have an `assets.deploy`
+alias for deployments, which will also use the `--style=compressed` option:
+
+```elixir
+"assets.deploy": ["sass default --style=compressed", "phx.digest"]
+```
+
## Acknowledgements
This package is based on the excellent [esbuild](https://github.com/phoenixframework/esbuild) by Wojtek Mach and José Valim.