I recently came across the brilliant Rails Assets service. Rails Assets is great. It acts as a bridge between your application and all of the packages available via Bower while still playing within the familiar confines of Rails’ oft-maligned Asset Pipeline. Bower packages are available as gems in the form of
rails-assets-bower-package-name. Easy peasy.
I did, however, uncover a minor snag today while using a CSS package with a dot in the package name (normalize.css). In
application.scss, I had:
@import "dependencies"; @import "normalize.css"; @import "base/*"; @import "components/**/*";
Nothing out of the ordinary if you’re familiar with importing Sass files. Everything appeared to be working great when running my application in development mode. When I ran the app in production mode, though, I noticed that none of normalize.css’ styles were being applied.
I dug in and found the following in the precompiled stylesheet:
Something—Rails, the Asset Pipeline, Rails Assets, Sass, Sprockets, whatever—was interpreting
@import "normalize.css"; as a vanilla CSS
@import instead of as instructions to the precompiler to include that file directly in the compiled stylesheet.
I was immediately suspicious that the dot in the package name was to blame. A quick
bower search normalize revealed that the official normalize.css package is also available as
normalize-css. I swapped
rails-assets-normalize-css into my app’s Gemfile, ran
bundle install, updated
application.scss, re-precompiled (that’s right) my app’s assets, fired up my app in production mode, crossed my fingers, recited an incantation, and reloaded my browser.
Lesson learned: If you’re using Rails Assets in a project and any of your
rails-assets-* gems have dots in the Bower package name, find a version of the package without the dot.