Bring CSS files nearer to HEEX

Phoenix Forum Questions / Help
, , ,
1

Using Phoenix 1.6.6 here.

Is there a way to bring some CSS files nearer to their sole use in a HEEX template and still be hot reloaded by the watcher?

Example here… I’d love to be able to quickly edit files side by side instead of having to find them buried in the assets folder…

Screen Shot 2022-01-20 at 2.45.04 PM

1 Like
2

Moved the files as in the screenshot and added css to dev.exs to look like this

config :app, AppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/app_web/(live|views)/.*(ex)$",
      ~r"lib/app_web/(live|views)/.*(css)$",
      ~r"lib/app_web/templates/.*(eex)$"
    ]
  ]

Along with this, refering to those CSS files from the assets folder by a bunch of relative double dots like this:

@import '../../../lib/app_web/live/components/liquidity_meeter.css';

It works, but does this make any sense as a project structure? Sure makes editing way easier with plain CSS instead of Tailwind.

1 Like
3

Looks good to mee.

4

Thank yoo