How do you rebuild CSS files in Phoenix 1.6.2?

Phoenix Forum Questions / Help
, ,
1

In my dev environment (a non-live-view app), I have made changes to my app.css. However, stopping the project and recompiling does not reflect changes in the UI. I am guessing this is getting cached somewhere. The file sits in my lib/appweb/assets/css folder. What command could help refresh/ rebuild the CSS.

Phoenix User level: Novice.

2

Please share your config/dev.exs and your base html template (where html>head>link is present ).

3

Have you enabled gzip in the endpoint.ex file? If yes, try setting it to false during development

4

It is set to false by default.

5

I am guessing this is the part you may want to see:

config/dev.exs:

config :sample, SampleWeb.Endpoint,

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

Beow is the html link:

<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
6

My friend suggested a hackey way of deleting the priv/static folder and rebuilding it. That worked for me. However, I think there may be an alternative way.

7

The file sits in my lib/appweb/assets/css

The assets folder is not conventionally inside the appweb folder. Was this a typo or did you create your own custom folder (or is this an umbrella app)?

I expect assets at the same level as lib

_
 |___ assets
 |    |___ css
 |
 |___ lib
1 Like
8

Apologies. Assets are indeed at the same level as the lib. So it is : assets/css.

9

in your endpoint.ex, does your static plug look like this? I had to change the “only” option to include “assets”

plug Plug.Static,
    at: "/",
    from: :some_project,
    gzip: false,
    only: ~w(assets fonts images favicon.ico robots.txt)