如何让Twitter Bootstrap的Less文件与Sinatra AssetPack配合使用？

Question

我试图让Bootstrap的Less文件与Sinatra AssetPack一起工作，但我遇到了Less解析器错误。这些错误让我相信通过bootstrap.less导入的less文件彼此不知道。

我有一个app.rb文件:

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

我已将所有的Bootstrap less文件复制到/app/css目录中，并修改了bootstrap.less文件，使每个@import语句以.css结尾（实际文件扩展名未更改）。我还将所有内容上传到Github: https://github.com/elevine/sinatra-assetpack-bootstrap 以下是我遇到的错误的堆栈跟踪的前半部分：

  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 在 mixins.less 中定义，此错误源于 reset.less，reset.less 是 bootstrap.less 中的第一个导入。我尝试重新排列导入的顺序，但并没有解决问题。

在这种设置下，是否可能使 bootstrap.less 中的 @import 语句正常工作？

- Eric Levine

Answer 1

最近对于AssetPack gem进行了大量的工作（现在内置的支持更少）。 如果您更新到最新的gem版本，则可以很容易地获得Less工作。 这个Gist包含完整的示例：https://gist.github.com/4652773。

- anonymous coward

---

太好了！我会试一下，如果有效的话就接受你的答案。 - Eric Levine

你是对的，AssetPack现在似乎有更好的支持，而且需要的代码量更少。它可以在没有这行代码的情况下正常工作：Less.paths << "#{App.root}/app/css"。 - Eric Levine

Answer 2

我找到的最好的解决方案是将less文件的路径添加到Less.path数组中。不需要更改任何原始less文件。

例如：

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

- Eric Levine