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

5

Are you still using this approach? Curious how you’re handling css more generally since it appears Phoenix doesn’t have scoped css.

I’m new to the framework and don’t plan on using tailwind so would welcome any tips.

6

Surface does…

https://surface-site.gigalixirapp.com/scoped_css

1 Like
7

Thanks. Surface looks good. Would be great to see most, if not all, of its features make their way into Phoenix.

I was hoping to see how far I could get without introducing more pieces since I’m new to the framework. I may give Surface a try but if anyone could speak to how they’re handling CSS without tailwind, I’d appreciate it.

8

A lot of Surface was brought into LiveView already - except a few things like context, scoped css and event params. I imagine you could rip off the scoped css into a separate library if you had the time and energy.

9

I did exactly that some months ago, but since I don’t have the time necessary to maintain it as a library, I never released it.

1 Like
10

You could make the repo public and archive it. Then someone could run with it if they wanted to take it on.

1 Like
11

There you go: GitHub - sezaru/live_view_scss_poc :slightly_smiling_face: