How do I get Twitter Bootstrap's Less files to

Question

I am trying to get Bootstrap's Less files working with Sinatra AssetPack, but I am getting Less parser errors. These errors lead me believe that the less files being imported through bootstrap.less are not aware of each other.

I have an app.rb file:

require 'sinatra/base'
require 'sinatra/assetpack'

class App < Sinatra::Base
  set :root, File.dirname(__FILE__)
  register Sinatra::AssetPack

  assets do
    css :bootstrap, [
      '/css/bootstrap.css'
    ]

  end

  get '/' do
    erb :index
  end

  # start the server if ruby file executed directly
  run! if app_file == $0
end

I've copied all of the Bootstrap less files into the /app/css directory and modified bootstrap.less so that each @import statement ends in .css instead of .less (the actual file extensions weren't changed though). I've also put everything up on Github: https://github.com/elevine/sinatra-assetpack-bootstrap

Here is first half of the stack trace from one of the errors I am getting:

  Less::ParseError - .tab-focus is undefined:
        at /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/js/lib/less/parser.js:385:31
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/parser.rb:57:in `block in to_css'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/java_script/v8_context.rb:90:in `block in do_lock'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/java_script/v8_context.rb:88:in `do_lock'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/java_script/v8_context.rb:60:in `lock'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/java_script/v8_context.rb:30:in `exec'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/java_script.rb:26:in `exec'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/less-2.2.1/lib/less/parser.rb:57:in `to_css'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/tilt-1.3.3/lib/tilt/css.rb:68:in `evaluate'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/tilt-1.3.3/lib/tilt/template.rb:76:in `render'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/sinatra-1.3.3/lib/sinatra/base.rb:686:in `render'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/sinatra-assetpack-0.0.11/lib/sinatra/assetpack/class_methods.rb:71:in `block (3 levels) in add_individual_routes!'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/tilt-1.3.3/lib/tilt.rb:127:in `fetch'
        /users/elevine/.rbenv/versions/1.9.2-p320/lib/ruby/gems/1.9.1/gems/sinatra-assetpack-0.0.11/lib/sinatra/assetpack/class_methods.rb:70:in `block (2 levels) in add_individual_routes!'

.tab-focus is defined in mixins.less, and this error originates from reset.less which is the first import in bootstrap.less. I've tried rearranging the order of the imports, but it did not solve the problem.

Is it possible to get the @import statements in bootstrap.less to work correctly in this setup?

Answer 1

There's been a bunch of work on the AssetPack gem recently (with less support now built in). If you update to the latest gem, it's pretty easy to get Less working. This Gist has a full example: https://gist.github.com/4652773.

Answer 2

The best solution I found was to simply add the path to the less files to the Less.path array. There is no need to change any of the original less files.

For example:

require 'sinatra/base'
require 'sinatra/assetpack'

class App < Sinatra::Base
  set :root, File.dirname(__FILE__)
  Less.paths <<  "#{App.root}/app/css" 

  register Sinatra::AssetPack

  assets do
    css :bootstrap, [
      '/css/bootstrap.css'
    ]

  end

  get '/' do
    erb :index
  end

  # start the server if ruby file executed directly
  run! if app_file == $0
end