Asset Pipeline

OK after a Pythonic interuption and a great vacation, back to my Rails upgrade. The original project was built way before the introduction of the asset pipeline. We we did the last rebranding, I was going cross-eyed trying to find all the references to colors - esp. as there were a couple of itterations from the design firm about exactly which gray was what. So I made myself a global color and font variable list and started to use less in development - with Less.app to recompile the stylesheets on the fly. I could just continue doing that - but it seems a shame not to use one of the big improvements in the Rails ecosystem. And we could use some help to get better browser/proxy caching and reliable cache expiration upon update.

So, I copied my *.less files from ‘public/stylesheets/’ into ‘app/assets/stylesheets’, renamed them from ‘.less’ to ‘.css.scss’, and updated all the variable references from @thing to $thing. Since I want my global variables used everywhere, I want a global compilation scope. According to the ROR Guide to the asset pipeline, that means I should use SASS’s @import directives rather than the rails asset pipeline require mechanism. I thought I understood - but then I was just getting an application.css file with the naked ‘@import “whatever”’ lines. The part I had overlooked was changing ‘application.css’ to ‘application.sass’. Once I did that, I got my content - with the variables correctly interpolated. I was still missing a couple of images referenced in the stylesheets. To fix that, all I needed to do was change from hand coding the url attribute background: url('/images/mte/search_button.png') no-repeat; to using the image-url helper background: image-url("mte/search_button.png") no-repeat;.

Getting my fonts to show up was a little more confusing. I started with a blog post from Atomic Object. It was for Rails 3.1 but I don’t think there have been major changes to the asset pipeline for Rails 4.1 - and the css files they generated from Font Squirrel look a lot like the files we got from the design firm. In the current site, I have all the font information in /public/fonts. I initially tried moving that directory into /app/assets/ but I had trouble finding an import statement that got the SASS compiler to include them in the compiled application.css file; using a relative url @import "../fonts/Caslon" got SASS to include them. But then I had trouble with the font-url helper - couldn’t figure out how to specify the location of the actual font files. The easiest working combination seems to be to move the fonts directory to app/assets/stylesheets/fonts, import Vaud.css.scss using @import "fonts/Vaud", and then use font-urls like src: font-url('fonts/VaudBook-webfont.eot'); /* IE9 Compat Modes */.