CODEWITHSUNDEEP
cssruby-on-railsasset-pipeline
pvskisteak5
pvskisteak5

Reputation: 4262

Rails Asset Pipeline - CSS Not Updating

I am trying to update the font in a rails app - specifically the text in a brand class in the top navbar. I was successful in changing the font using google web fonts already, but now when I try to update the font again, it seems to be "stuck" on the last font I used. I precompiled assets before deploying to heroku, which is what I think may be causing the problem. Now the changes are not updating locally or in production.

I have done a few things to troubleshoot but none seem to be working:

  1. Restarted the rails server
  2. Emptied the cache folder in the tmp folder
  3. Deleted public assets
  4. Tried precompiling assets again - the font change does not work locally or on heroku
  5. Tried targeting a more specific css selector (.navbar .brand versus .brand - it worked earlier for .brand so don't think that is the issue)
  6. Cleared browsing history

Any ideas on what may be causing this?

Upvotes: 0

Views: 4582

Answers (3)

pvskisteak5
pvskisteak5

Reputation: 4262

Stupid mistake - had a navbar class styled in my css with font-style: monospace. After clearing that, everything worked - hopefully the troubleshooting steps help others!

Upvotes: 1

Brian Petro
Brian Petro

Reputation: 1567

  1. View your page source and search for the font src. If you can't find it skip to 3.

  2. Test the font and display code outside of the rails apps to make sure it is the asset pipeline.

  3. If the src and display code work, provide your application.css and application.js to check your manifests.

  4. What config files/code have you changed since your last assets:precompile that is not working properly.

My similar issue: Bootstrap, jQuery, and the Rails asset pipeline

Upvotes: 0

Luiz E.
Luiz E.

Reputation: 7279

Are you using turbolinks? If so, read this

Asset change detection

You can track certain assets, like application.js and application.css, that you want to ensure are always of the latest version inside a Turbolinks session. This is done by marking those asset links with data-turbolinks-track, like so:

<link href="/assets/application-9bd64a86adb3cd9ab3b16e9dca67a33a.css"

rel="stylesheet" type="text/css" data-turbolinks-track>

If those assets change URLs (embed an md5 stamp to ensure this), the page will do a full reload instead of going through Turbolinks. This ensures that all Turbolinks sessions will always be running off your latest JavaScript and CSS.

When this happens, you'll technically be requesting the same page twice. Once through Turbolinks to detect that the assets changed, and then again when we do a full redirect to that page.

Upvotes: 3

Related Questions