Add CSS files in Phoenix

Phoenix Forum Questions / Help
1

I added a navbar.html.eex to my layout folder and this template is rendered from app.html.eex <%= render "navbar.html", conn: @conn, current_user: @current_user %>

in app.css:

@import 'navbar.css';

and it should point to my file: assets/css/navbar.css

But the file does not load, in my browser console I get: GET http://localhost:4000/css/navbar.css net::ERR_ABORTED with a 404 error.

I come from the Rails world and that’s how I was used to do but maybe there is another way of doing it in Phoenix. I can’t find a nice doc about managing css files in Phoenix so if anybody has some readings to recommend ! I’ll be grateful !

1 Like
2

In the default phoenix setup (with brunch) all files in css folder are concatenated into one big app.css.

Can you find where you link to http://localhost:4000/css/navbar.css? It will probably look like

<link rel="stylesheet" href="<%= static_path(@conn, "/css/navbar.css") %>">

You can check the priv/static folder to find out which files are actually produced by brunch.

It’s more of a brunch issue though, so you might want to read more on brunch or switch to any other bundler that you are more comfortable with.

1 Like
3

Thank you ! I’m gonna dive into Brunch.

So, my files are all in assets/css.

After I changed them a bit, (ìmport navbar.css rather than @import 'navbar.css';) The css contained in navbar.css is loaded in the big app.css in priv/static.

But when I inspect my document in the browser, I do not see my CSS, even though app.css was loaded.

Edit: OKKK so I just realised that there is noimport needed with brunch ! great.