Issues with Rails 3.2 application.css.scss caching in development - caching

I seem to be having major issues with the asset pipeline in Rails 3.2. It alls started because I wanted to add a single, simple style to my application.css.scss whilst working in the development environment. I have done this in the past with no problem and it just works because there is no caching occurring (as you would expect).
However, when I attempted to add the new style today, Rails refused to load the updated styles. I checked my environment settings and they all seem correct in development.rb,
config.assets.compress = false
config.assets.debug = true
I did some research and came across rails 3.1 asset pipeline css caching in development. Following the advice given in that question, I made sure that I deleted the tmp/cache folder as well performed a clean using rake assets:clean just in case I had run the app in production mode at some point and it needed cleaning up.
After all this, still no luck. Just to confirm that I hadn't made a bonehead mistake, I temporarily moved the style to another stylesheet. No problems! It worked perfectly! So I moved the style back and it won't load again.
I also checked the console. It reloaded the other stylesheet correctly but no mention of the original stylesheet.
Now, here comes the major issue. As a last ditch effort, I tried clearing my browser cache. I normally have no problems with it on but I thought something might be cached and causing problems. I cleared it and reloaded the app and.... no styles loaded whatsoever!
It seems that all of my application.css.scss styles were cached at some previous point and now I simply can't reload them!
UPDATE:
Although I still haven't fixed the problem, I've worked around it by creating a new stylesheet called main.css.scss (name not important) and moving all of the styles to the new stylesheet. This works because of the //= require_tree . directive in the manifest.
But if anyone can shed some light on why the original stylesheet stopped working, I would love to know!

try rm -r public/assets/*
maybe your assets:clean task is not working properly.

Related

Sass not compiling properly to application.css rails 7

I have setup a new rails 7 project with Bootstrap 5.2 and Sass, however when it comes to adding in custom styling (with Sass) Rails appears to not be compiling the Sass styling into app/assets/stylesheets/application.css. I have no errors to go off here and after spending far too long on the problem, decided to start fresh with the following setup instructions - https://railsbytes.com/public/templates/V2Gsg9
I had to remove the #import "bootstrap" code below as this throws a compilation error.
append_file 'app/assets/stylesheets/application.scss', <<-CODE
#import "bootstrap";
CODE
I'm unsure if this is relevant to the issue, however I was having issues with the bootstrap setup, where the JavaScript was not working, and followed the following setup from another stackoverflow https://stackoverflow.com/questions/70907799/bootstrap-5-javascript-functions-not-working-in-rails-7-app which has fixed this issue.
In summary, the only problem I'm now facing is that the css is not compiling. I found a number of other resources related to the same issue, however the setup is slightly different and when I try to run the solutions provided it does not work. I have seen multiple posts suggesting to attempt to run rails assets:precompile, which I did, however it broke all the styling setup and couldn't revert it back for some reason (part of the reason whey I started on a new project).
In addition to the new setup, I also tried this suggestion by "stevec" in the following https://stackoverflow.com/questions/71300845/custom-css-not-working-with-css-bundling-for-rails-7. This works, however it doesn't seem to be the Rails way of doing things. This suggests each stylesheet needs to be added to the app/assets/config/manifest.js and also to the application.html.erb file. To my understanding, each view should have its own style sheet which is then imported into application.css.
I feel I'm close to the solution but am finding it challenging at the moment to understand the documentation on the asset pipeline... Some recommendations suggest to install yarn/npm however I thought that's the benefit/job of importmap so have not gone down that path

fixing css after rake:assets precompile - how to not run capistrano

I recently changed an image on the landing page of my herokuapp built in rails. I realized that everything worked fine except that the landing page threw a 500 error. Upon some research I realized i should run RAILS_ENV=production bundle exec rake assets:precompile
After doing so, the images and some of the styling came back but some of it is still screwy and I cannot understand why.
I've read through just about every stackoverflow thread, the rails guide on the asset pipeline, and others but I can't get it to work. I've amended the files that need amending
as far as I know but nothing is working to make the styling revert to how it should be.
However, on the rails guide it notes that there are two caveats to locally precompile:
You must not run the Capistrano deployment task that precompiles
assets. You must change the following two application configuration
settings. In config/environments/development.rb, place the following
line:
config.assets.prefix = "/dev-assets"
I did the change within development.rb but I am not sure on how I can not run Capistrano. I dont think I'm doing that so maybe it's throwing some things off - idk, but each time I try to recompile now, the rake aborts. Any help is very much appreciated.

Heroku production differing from local development (Rails)

I'm new to coding and to Rails and I've run into this issue for the first time - the local development version of my app is differing in a detrimental way from the production version.
I'm using Zurb Foundation on my Rails app and deploying to Heroku to see it in production.The issue that I am facing is that locally, the CSS I wrote to get the padding between the navbar and the rest of the page is working correctly, but when I deploy to Heroku the CSS is not rendering correctly and the padding is missing.
I wrapped the yield in application.html.erb with a div of a class I named "fixednavbar" and wrote the following css:
.fixednavbar {
padding-top: 60px;
}
I put this css in a layouts.css.scss file in the asset pipeline (Rails 3.2.13). The code in the application.html.erb file is as follows:
<div class="row fixednavbar">
<%= yield %>
</div>
I have checked the code locally and on github to make sure they match up and they do. I took a drastic step and started a new repository, then removed the local git repository and started a new one and pushed all the current files there (I created a new repository on github so that all of my previous versions are still in the original repository).
After doing this, I created a new Heroku app and deployed and still the production version is not rendering the CSS the same as the development version.
I'm at a complete loss as to why these versions would differ when the code is the same (unless there is something lurking somewhere else that I have not thought to check).
Any and all help is much appreciated. As I said, I'm knew to Rails (and coding for the most part) and this is the first time I've run into an issue like this.
Thank you!
Update:
I have continued to try to sort this out. I did other work on the application and then came back to this issue. I want to get the production version to reflect what is in development, so any help at all would be amazing.
To describe the issue further: It is almost as if my production deployment to Heroku is stuck in an old version of the app when the css wasn't worked out yet. The navbar color is stuck on the first color I changed it to and will not update to the new color. The sticky nav is still causing an issue in production where the body is partially hidden behind the nav.
Now, in development running the local server, I have fixed all these issues. The changes are reflected in development and everything is as it is intended to be.
After the changes, I commit to the git, then I push to github. After pushing to github, I push to Heroku.
The github files reflect the changes and the code is as it should be. Still, Heroku is not reflecting this.. I'm honestly stumped here and need some help please.
With some help from the users who responded, I was able to identify the error and search for the solution. I found it HERE.
The solution is to look in the production.rb file and find the line where it says
config.assets.compile = false
and change "false" to true.
config.assets.compile = true
Then run
rake assets:precompile RAILS_ENV='production'
After deploying to Heroku, you may need to run
heroku run rake db:migrate
This got everything working correctly upon deployment to Heroku.
How have you included this plugin? Instead of adding the js and css directly, try using their gem from https://github.com/zurb/foundation-rails and remove any direct references from your app. I've faced similar issues with other plugins like bootstrap, bxslider etc.
As a beginner, I was having a difficult time with the same issue. Because I'm using Rails 4, the simple step of removing this line from config/application.rb did the trick.
config.assets.initialize_on_precompile = false
https://devcenter.heroku.com/articles/rails-asset-pipeline
Granted, I troubleshot all the above steps and a few others from other postings.

Rails 3.1 not detecting Coffeescript and Javascript changes?

Sometimes I update my Coffee code in Rails 3.1 and it doesn't detect any of the changes, ie. I refresh my browser/cache and it still invokes the old script. Anyone know what causes this?
EDIT: I even litter my entire scripts with "debugger" and none of them ever gets called. Any idea why it simply won't refresh the Coffeescripts?
EDIT2: I realize that it doesn't even detect javascript changes sometimes. Am I missing something? Note I am not bouncing my server when I change JS files... It used to work...
For the development environment you could try to rake assets:clean. Rails sometimes reads the precompiled assets in development environment, so this will clean them and the fresh ones will be loaded.
For the production environment try to rake assets:precompile, so that the changes are compiled and stored in the assets files.
For the curious, it suddenly started functioning correctly again by itself. I have reason to believe it was actually the Daylight Savings Time that caused this bug. Not sure if this could be the case but it suspiciously started working again naturally after a fixed amount of time (about 1 hour).
Try rake assets:precompile, if you haven't already.

rails 3.1 some assets not precompiling on production

I was running into issues with Heroku showing my 'places.js' was not precompiled, even though im running on the cedar stack, and during the slug compilation it is running the rake precompile task. so i tried running it locally with rake assets:precompile RAILS_ENV=production and indeed rails was not precompiling my /app/assets/javascripts/places.js.coffee.erb asset.
my production.rb is using default rails 3.1 configuration, and i even tried removing the .erb from the asset, but to no avail.
I also thought since my places.js.coffee.erb asset is NOT included in the sprockets manifest (i include it manually in my app), perhaps it only precompiles assets in the manifest. Requiring it in the manifest didn't work either.
only my application.js.coffee and `application.css are precompiling (with and without a digest).
the only issue i found was possibly poor regex being used to match assets, but the default of (?:\/|\\|\A)application\.(css|js)$ does not match my asset, so it should be included.
i am not sure how to troubleshoot from here. everything is pretty much default. any thoughts on what could be happening here?
Firstly, if you want a file to compile when it is not in a manifest, you need to add it to the precompile config option:
config.assets.precompile += ['places.js']
Secondly, can you edit your question to include your manifest - it may be a syntax issue. I will edit this answer if I can see what the issue might be.
I had the same issue and resolved it like this:
# add new file /app/assets/javascripts/places_manifest.js
//= require places
# add a line to config/application.rb
config.assets.precompile += ['places_manifest.js']
# in your views include places_manifest, not places
javascript_include_tag 'places_manifest'
While the above solutions seem fine, I wondered why do I have to do this?
Like everyone else, I got the error in production stating that my newly added javascript file was not pre-compiled. It was however, I found it's code in the minified application.css file that Rails had generated on my production server.
The problem was that while developing, I thought I would need to add a javascript_include_tag helper to load my new javascript file. Adding that helper was the source of my particular error. I just removed it, and everything worked fine in both development and production environments.
So my suggestion to you is look for signs of your new .js file in your minified application.js and don't modify any other files as the above solutions suggest. Please point out the error in my ways if necessary ;)

Resources