Integrate a Bootswatch theme into a Rails 4 app by hand

Adding yet another Gem into my application just to incorporate a Bootstrap theme (from Bootswatch)  seemed like overkill. Doing it manually was not hard…

Following the instructions for the bootstrap-sass Gem, we start with an app/assets/stylesheets/application.css.scss that looks like:

  @import "bootstrap-sprockets";
  @import "bootstrap";

Say we want to use the Yeti theme, download the _bootswatch.scss and _variables.scss files from the Bootswatch site. Place the files in a vendor/assets/stylesheets/bootswatch/yeti/ directory in your Rails project. 

Finally add the new @import statements in your app/assets/stylesheets/application.css.scss file, leaving it looking like:

  @import "bootswatch/yeti/_variables";
  @import "bootstrap-sprockets";
  @import "bootstrap";
  @import "bootswatch/yeti/_bootswatch";

The order of the imports is important. I have a comment block above those imports that reads:

  // order is important here
  // 1. theme variable overrides
  // 2. theme variables
  // 3. any core bootstrap variable overrides
  // 4. bootstrap-sockets and bootstrap
  // 5. theme styles
  // 6. application styles