How to have multiple css/js files in output?

Questions / Help
1

Hello, I’m starting using SCSS with dart_sass I looked in Asset Management — Phoenix v1.7.6 but I still don’t get how to have multiple css files in output

The standard config for dart_sass (GitHub - CargoSense/dart_sass: An installer for sass powered by Elixir Mix) is:

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

The config take one scss and give one css, I would have multiple scss input and multiple css in output (one for each controller by example)

1 Like
2

I’d also want to know, at least for scss input files…

3

I don’t use dart but the :args key should just be delegating to the CLI tool. According to the docs you can have multiple outputs using the syntax: ~w(in1.scss:out1.css in2.scss:out2.css). Seems like it may be cumbersome if wanting to create a specific file for each controller, though you could probably metaprogram something to do that.

4

I used Tailwind with somoething like this

config :tailwind,
  version: "3.2.7",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ],
  embed: [
    args: ~w(
      --config=embedded.config.js
      --input=css/embed.css
      --output=../priv/static/assets/embed.css
      --minify
    ),
    cd: Path.expand("../assets", __DIR__)
  ]