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:

@import url('normalize.css');

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.

Success!

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.