Having problems with Rails 3.2.3
I have 3 CSS files in /assets/stylesheets:
application.css (has require_self & require_tree .)
bootstrap.css
myapp.css
Running rails server on localhost:3000, all is well
Whenever I change a CSS property, it gets updated in the view (e.g. change a color). However, whenever I delete a CSS property, nothing happens. In fact, I can remove all the text from all the CSS files and nothing will change.
I've tried resetting everything: rails server, clear browser everything, restart all programs, to no avail.
Anyone know what is wrong?
Edit: this problem started after I ran
rake assets:precompile
and the "fallback" CSS style when I delete properties from the static CSS files (i.e. what it will default to) is based on whatever the CSS files looked like last time I ran rake assets:precompile
Rake assets:clean
will work for you, as u ll be having compiled css and javascript files in your public folder, so by removing those your problem will be solved.
Related
I had a Rails 4 app that was loading the css.scss files just fine. Then I did something to break it, I don't know what, and reverting to the last git check-in isn't fixing the problem.
My structure is exactly as rails new [project name] left it, and I've never had to look at how the assets get loaded. Reading up on the asset pipeline just left me more confused.
I'm actually putting all of my styling in app\assets\stylesheets\application.css.scss, which begins with
*= require_self
*= require_tree .
as I believe it should, but (judging from the Chrome developer tools view) the application isn't even getting as far as loading that. So where does a Rails 4 application get told to load app\assets\stylesheets\application.css.scss?
(Yes, I see others have problems with loading the stylesheets, but the advice always seems to be to put the stylesheets where I already have them or to include those lines in the application stylesheet that I already have, so it looks as if my problem is something else).
I am trying to figure out how to get boostrap-sass working in production mode. I am using apache to reverse proxy to either webrick or puma, but serve the static assets in public/assets directly. When I precompile assets, the bootstrap css gets included into the application-(hash).css and it works correctly.
However the compiled css references an image file (glyphicons-halfling.png) without appending the hash of the file contents. The image file is included in public/assets directory, and it is possible to browse to it by putting the correct filename in the address bar, but the filename in the css does not match it. I have created a simple demo app that demonstrates this problem, code is on my github page
The glyphicon filename is glyphicons-halflings-c806376f05e4ccabe2c5315a8e95667c.png
[EDIT]
Would still like an answer to this question, but i've just renamed the offending files to remove the hash. Since these files are unlikely to change frequently then this should work fine
Think I have it cracked, when you run rake assets:precompile, it seems that you must prefix it with RAILS_ENV=production in order for it to work properly in production mode (I guess that kind of makes sense). If you don't, some of your assets will get precompiled, but the helper methods will not generate the correct paths.
tl:dr, RAILS_ENV=production rake assets:precompile
This one is not holding me up, but I'm really curious what is happening.
I have in my application.css:
*= require_self
*= require conversations
and have some styles defined in my conversations.css, but they would not get picked up!
By chance, I renamed to conversations.css.scss and suddenly it started working. I renamed back to .css and it stopped.
I thought you could have either .css or .scss files and they would get picked up by rails (my version is 3.2.11)
Edit: I also tried this for .js files and the same behaviour. As soon as I add .coffee to any .js file, it gets picked up and used, otherwise, it does not.
Has anyone seen this behaviour before? If so, what is going on?
I am quite new with Rails and I am having some irritating problems with caching of css files.
I have a .css.less file with imports inside it. It's the only stylesheet the app includes, so the other files get imported only once and by this unique stylesheet.
One of those imported .css.less stylesheets seems to be cached somewhere, because does not change in the browser when I change it's source.
I can only see the changes I made if I change something in the root stylesheet.
I have the server in development mode, so the caching should be off. I have also used <%= stylesheet_include_tag "style", :cache => false %>
I tried with Chrome and Firefox, with and without clearing their cache too. Always the same result, if I work only on that file the css the page receives when reloaded doesn't have the changes...
I also stopped the server and rm everything in the tmp folder of the app. No changes.
I am using Rails 3.1 with Ruby 1.9.3, with the less-bootstrap-rails gem. Both the root stylesheet and the imported one have .css.less extension.
What am I missing?
Thank you!
This is an area where I think the asset pipeline is broken, but I don't think there's a good fix.
If I remember correctly, to get changes in files you've included/required in your .css.less file, you need to change the .css.less file itself.
I had this on Rails 4.0.8, infuriating. The config changes mentioned above didn't help. Here's what seems to have fixed it for me:
Ensure NO FILES share a base name. For example, you have a reports.css.less and a reports.js.coffee? Doesn't matter if they're in the same directory or not. Rename or delete one of them. (I changed it to reports-styles.css.less).
Blow away your cache: rm -rf tmp/cache
Restart your Rails app.
This appears to be a decent fix but, since I don't know what's actually going on, this could be totally false and it's just working by coincidence now. Sorry this answer isn't more rigorous!
I've just came across the exact same problem.
I found that if you rename your *.css.less file (the one with the imports inside) to *.less, then this weird cacheing problem gets resolved.
Add this to your config/application.rb
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
See more at: Ruby on Rails Guide: Asset Pipeline
I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.
# Ruby
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.
Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.
Is there some sort of image caching going on? This is just local development using pow to serve the pages.
Even destroying the whole images folder the images are still being served.
Am I missing something?
In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png
Because the assets/images folder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tag will look for it, but I haven't tested that yet.
Also, during the RailsConf keynote, I remember D2h saying the the public folder should not have much in it anymore, mostly just error pages and a favicon.
You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:
background-image:url(<%=asset_path "admin/logo.png"%>);
You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.
In production, make sure
rm -rf public/assets
bundle exec rake assets:precompile RAILS_ENV=production
happens upon deployment.
For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...
div.example { background: url('example.png'); }
... then somehow it magically works. I figured this out by running the rake assets:precompile task, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...
In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.
Kind of frustrating there aren't better docs out there for this big of a change.
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.
when referencing images in CSS or in an IMG tag, use image-name.jpg
while the image is really located under ./assets/images/image-name.jpg
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.
The solution I chose is #Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!
The asset pipeline in rails offers a method for this exact thing.
You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:
.logo{ background:url(image_path('admin/logo.png'));
(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)
Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?