I have upgraded a rails app to version 4, but have some issues with Sass on Heroku. It seems like none of my included image in the Sass file gets the digest appended to the file.
Since rails 4 only generates a digest version of the assets, this fails. What can I do so the images in the Sass file on Heroku, also appends the digest to the CSS?
When referencing images within a sass file that are served up by the asset pipeline, you need to use the helpers provided by the sass-rails gem. From the Rails site:
image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png"
Related
I have upgraded from 3.2 to 4. But assets are broken.
I have been using "assets/img/work/1.jpg" but I can't access to them in this way now. I can only access with digest like "assets/img/work/1-90041f6a6f670bd667cbfb47a50b27d2.jpg" what should i do? Only way is using image_tag?
Is using erb in CSS and JS files cause performance issues?
Append RAILS_ENV=production to rake assets:precompile will bring back the digest in CSS.
Unfortunately, the way that assets works has changed in Rails 4 so that sprockets-rails only generates digested assets. See Changes from Rails 3x for more details.
As commented in this answer, there is a rake task at https://github.com/rails/sprockets-rails/issues/49#issuecomment-20535134 that may be helpful if you need to generate static assets.
I can't comment on performance issues with ERB in CSS and JavaScript. The rails guide implies that using ERB in JS and CoffeeScript is the "Rails Way" of doing what you require. If you are using sass, you can use image-url instead of an ERB file.
I am working on the css and html of a simple web-project.
I would like to use livereload to update what gets rendered in the browser on the fly whenever I make a change to any of the files in my project.
From the description on the livereload website:
What does LiveReload do?
LiveReload monitors changes in the file system. As soon as you save a
file, it is preprocessed as needed, and the browser is refreshed.
Even cooler, when you change a CSS file or an image, the browser is
updated instantly without reloading the page.
Since this is not a rails/sinatra project, but just simple html/css/js, what could I use to get live reloading?
E.g. is there some lightweight server in the gem repos that could solve this for me?
You could use the catapult gem to set up a simple sprockets app, without sinatra or rails. It is just a static site that makes it easy to use a sort of asset pipeline. I have used it a lot and I love it.
Then in your Gemfile you can add gem 'guard-livereload' project here.
Just follow the setup instructions, you may also have to check out guard to get everything working nicely together.
I only am suggesting catapult because it makes setting up a simple static site incredibly easy with the added benefit of sprockets, coffeescript and your flavor of sass.
To do this without catapult, just run bundle init (assuming you have the bundler gem installed) in your root directory which will create a Gemfile. Then all you need to do is add the guard-livereload gem like I wrote above.
enjoy
I have found jasminerice very helpful for getting all my Jasmine tests to run via Rails 3.1's asset pipeline. The only thing I remain stuck with, is that I cannot get my setup to load any stylesheets (that go with my fixtures) and I need them for a couple of dom / element-style specific tests. Does anybody know how to get the stylesheets to be loaded in this setup?
Support for CSS files has been added recently, the README states:
For including stylesheets in your specs, jasminerice uses a spec.css file. Create such a file next to the spec.js.coffee file:
spec/javascripts/spec.css
and in that file, use sprockets directives to include the right css files, e.g.
/*
*= require application
*/
The change is fairly new so you may want to include the gem directly from the latest github version:
# Gemfile
gem 'jasminerice', git: 'git://github.com/bradphelan/jasminerice.git'
You may also want to be precise with your css markup, so as to not mess up Jasmine's spec runner page as the css files (as the js files) are included directly into it.
I have updated the Jasminerice gem and bradphelan (the Jasminerice author) has pulled that change into the source on Github. So in order to use use stylesheets in your Jasmine tests running through Jasminerice, simply refer to the gem on Github in your Gemfile like so: gem "jasminerice", :git => 'git://github.com/bradphelan/jasminerice.git'. The documentation has also been updated on Github.
The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.
Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.
Sass / SCSS has this built in already so you don't have to do ERB pre-processing.
image-url("image.png")
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
For me this problem resolved very easy.
I simple deleted all precompiled *.css files from assets/stylesheets and remain all *.scss files. Rails worked fine with *.scss directly, withoutn precompile.
I have just updated my application from rails 3.0.7 to 3.1.0.rc4.
In my old app., my .sass files are in the ~/app/stylesheets directory.
Should I move these files to the ~/app/assets/stylesheets directory?
If you want them to be automatically processed by the asset pipeline, then yes. You can manually configure sass to read them from anywhere, but that is the easiest way.
Note: make sure you have sass-rails in your Gemfile. You might want to have a glance at the asset pipeline documentation.