Follow Along as I Stumble on the Path to Learning RoR

Posts tagged “rails 3.1

Referencing an Image from CSS File in Asset Pipeline

In order to reference an image from the CSS file, I added .scss at the end of the .css file and referenced the image using this syntax:

background: url(asset-path(“example.png”,image)) no-repeat; 

Advertisements

Making the Asset Pipeline Less Verbose

I was getting a little overwhelmed by the amount of messages regarding each asset in my development logs, so I wanted to make my logs less verbose.  It was making it more challenging to find the real actions and queries I was trying to analyze.

I found the answer in this post on Stack Overflow.

For some people, adding the initializer code worked, but for me, I went with adding:

config.assets.debug = false

in config/enviroments/development.rb 

and that was sufficient for me.  I’m using Rails 3.1 and I noticed different settings people used in 3.2, so it may also be different if you use 3.2.


Getting Font-Face to work with the Asset Pipeline

I use a custom font-face (from font squirrel) which is referenced in my CSS and I also have the font files stored within my app.  When I implemented the asset pipeline, the font-face was not read in because my fonts were not referenced correctly. After a lot of trial and error I found my answer.

(1) I had to install the sass-rails gem in my gemfile (https://github.com/rails/sass-rails)

(2) I needed to change my .css file to .css.sccs (http://guides.rubyonrails.org/asset_pipeline.html) to allow sass processing of the files (which allows the use of the sass helper methods ‘asset-path’ and ‘asset-url’ – see https://github.com/rails/sass-rails for helpers).  As a sidenote, it is recommended that for sass-rails you use @import (see gem page on github) instead of requirerequire_tree, and require_self (I left require_self) 

(3) I placed my fonts in app/fonts

(4) this post on Stack Overflow (http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app) by Greg Stewart was how I needed to adjust my CSS (below).  

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

(5) you may need to precompile your assets to get this to work – depending on if your app has config in application.rb as precompile = true (or false).  to precompile use this command:

bundle exec rake assets:precompile

(6) If you have trouble after this, you may need to add the fonts to the assets path by adding this to your application.rb file: 

config.assets.paths << "#{Rails.root}/app/assets/fonts"

Moving to 3.1 on Heroku

Took some lumps moving to 3.1 on Heroku.

Here’s some lessons:

  1. config.assets.initialize_on_precompile = false

    this has to be set per Rails Guides and Heroku.

  2. run “bundle exec rake assets:precompile” locally before pushing to Heroku.  I had a lot of stuff work locally, but when Heroku compiled it, it blew up.  There were a lot of things that I needed to change in my CSS files, working through them one by one
  3. the precompile generated files i uploaded (for the asset
  4. I had a bunch of views with javascript_include_tag and the asset pipeline wasn’t fond of that so I moved it into my application.cs and .js files to use instead
  5. I was getting some errors related to the Sass-rails gem even though it was included in my gemfile.  Turns out I had to move it so that it was outside of this block “group :assets do” that I had it in

Moving to 3.1 on Heroku

Took some lumps moving to 3.1 on Heroku.

Here’s some lessons:

  1. config.assets.initialize_on_precompile = false

    this has to be set per Rails Guides and Heroku.

  2. run “bundle exec rake assets:precompile” locally before pushing to Heroku.  I had a lot of stuff work locally, but when Heroku compiled it, it blew up.  There were a lot of things that I needed to change in my CSS files, working through them one by one
  3. the precompile generated files i uploaded (for the assets), as well as the manifest.yml file
  4. I had a bunch of views with javascript_include_tag and the asset pipeline wasn’t fond of that so I moved it into my application.cs and .js files to use instead