rails 3.1 asset pipeline css caching in development

Question

I'm a bit confused as it seems like the application.css is including itself twice, once when it lists the resources from the manifest and then a cache of that. So when I delete an individual file it still seems to stay alive inside the application.css file.

application.css (source)

/*
*= require twitter/bootstrap
*= require_self
*= require_tree ./common
*= require_tree ./helpers
*/

Which works as expected and outputs in dev mode all the relevant individual files

development.rb

  # Do not compress assets
  config.assets.compress = false

  # Expands the lines which load the assets
  config.assets.debug = true

output

<link href="/assets/twitter/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/common/announcement.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/common/button.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<Blah blah>

application.css (output)

This should be blank? Since all I have in my application.css file is the manifest and no actual css but instead i get all my concatenated code 106kb long.

IE if I remove a file in the common directory, it doesn't go away. It is no longer listed in the output but the css still appears from the application.css

Solution 1

I had a problem like this before. It was caused after I had precompiled the assets it was going after the applcation.css inside the public folder as well as in the apps directory. I'm not sure how to fix it so that it doesn't keep happening while in dev mode but if you delete your /public/assets directory it should fix it.

Check and see if you have a public/assets folder, if you do and it's full, it's probably why you're seeing double.

Solution 2

There is currently (2012-09-24) a bug in rails/sprockets causing it to not properly detect imported files.

This should be fixed in rails 3.2.9 and later but in the mean time, you can work around it as follows:

1. Kill the rails instance
2. rm -rf tmp/cache
3. Start the rails instance

You should now be seeing the correct css.

Solution 3

You might want to look at

https://stackoverflow.com/a/7854902/686460

"Adding config.serve_static_assets = false to development.rb will prevent loading files from /public/assets"

That did it for me.

Solution 4

@Agustin's solution does it for me but here are a few things you need to do:

1. Delete everything in /tmp/cache/assets

2. Add config.serve_static_assets = false to development.rb or test.rb (credits to @Agustin)

3. Restart your server.

4. Make sure your application.js / .css is not cached in your browser. Go to http://localhost:3000/assets/application.js?body=1 and hit ctrl+f5 to force refresh (you can also try appending appending a randomizer param at the end: http://localhost:3000/assets/application.js?body=1&rnd=12343 If you get something else and ctrl+f5 still hasn't helped, you need to clear your browser's cache.

Skipping either of these steps returned a cached application.js / .css conflicting with my updates in single files.

Solution 5

The best way, that worked for me is to delete content of tmp/cache/* directory...

View more solutions

Comments

[holden]

how am I supposed to hide the assets in the public folder between pushing changes in production and then going back to development? Can I remove it from my path in dev somehow?

[ZMorek]

I deleted my application.js and application.css but left the fingerprinted versions. Looks like it's working for me.

[Kleber S.]

Deleting my application.css and apllication.css.gz fixed the problem. Thanks.

[Matthew O'Riordan]

This didn't work for me unfortunately, it's still serving a compressed version of application.js directly from /public/assets

[Matthew O'Riordan]

I am really surprised that this work around solution is needed. I compile around 10-15 files, and each of those files is now being served as compressed and uncompressed in dev causing havoc. Does this mean I have to write a script to clean up application.js, application.css, and all the other compressed files each time? This really does not make much sense.

[Matthew O'Riordan]

Oops, sorry @Agustin, this solution did work. However, all assets that were not part of the Asset pipeline are no longer served (such as favicon.ico and fonts). Looks like I'll have to come up with a solution for those assets.

[evanrmurphy]

If you deploy using Capistrano, you can set up a shared folder for your assets on the production server or a hook to precompile assets on production after each deployment. This way you never have to precompile assets locally and can keep public/assets clean on your local machine to avoid the redundant includes. I'm not pretending this is ideal - it's bothersome to me that any jury rigging is needed with the assets pipeline - just that it's a relatively clean workaround.

[Space]

Deleting the /public/assets directory fixed a bunch of weird issues for me with active_admin on the front-end. Thanks!

[Paul Schreiber]

I bet this is happening if you cancel a deploy partway through — assets get compiled, but never cleaned.

[Brent Matzelle]

Peter, can you please provide a link to this bug?

[Breno Salgado]

god this is annoying... no luck here yet

[Abdo]

is there anything cached in public? inspect the page and make sure application.css is not being served twice (or contains code)... I know how you're feeling, it's very annoying.

[FireDragon]

just wanted to note that this was exactly what i needed to do. clearing the cache after setting the switch in development.rb did the trick

[FireDragon]

i may not be understanding things fully, but I deploy to Heroku and precompile my assets locally, then push to heroku using git. although deleting public\assets could fix issue in development, wouldn't you need to re-compile before deploying to Heroku again? and, check all the files into git again? Perhaps i'm not fully understanding?

[ZMorek]

I had rails running while I made gem changes, which led twitter-bootstrap-rails to have stale css. Destroyed the folder, all fixed. Thanks.

[Mark Berry]

This answer suggests another approach: assign a dummy asset folder for the development environment. stackoverflow.com/a/11587288/550712

[David Alozie]

Also refresh browser cache by CTRL+F5 (Cmd+Shift+R on Mac)

[Bruno]

Restart the server afterwards