add CSS files to Phoenix

Question

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 !

Answer 1

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.

Answer 2

In Phoenix, all css files are/should be stored in the priv\static\css folder. In order to add your custom css, add the css file to the folder above then head to the lib\foldername_web\templates\layout and edit the app.html.eex file located there. You will see a line between the head tags that looks like this:

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

Edit the text and rename it to the css file you created or added so that the line looks like this.

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

Your page should look different now. I hope this helps.

Answer 3

this post might help you with the configuration.

https://elixirforum.com/t/boostrap-4-sass-installation-in-phoenix-1-3/10139?source_topic_id=10804

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

Answer 4

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

Answer 5

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.