add CSS files to Phoenix

Jules Corb Source

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 !



answered 8 months ago Jules Corb #1

Ok so after I read the docs I realised Pheonix uses Brunch and gather CSS in a big app.css file in priv/static. No import needed like in Rails.

answered 8 months ago Cyzanfar #2

Phoenix uses Brunch which builds your assets. By default, it will copy everything in your /web/static/assets/ directory to /priv/static. Check out the Phoenix Static Assets documentation for more information.

answered 8 months ago Muhammad Mullah #3

this post might help you with the configuration.

and will hopefully resolve your issues. I had the same issue when setting up my front-end and it helped me out

answered 3 months ago Iwan B. #4

All .css files inside assets/css will be imported automatically. No need to import them explicitly.

comments powered by Disqus