如何让Twitter Bootstrap的Less文件与Sinatra AssetPack一起使用?

时间:2012-08-23 20:17:57

标签: ruby twitter-bootstrap sinatra less sinatra-assetpack

我试图让Bootstrap的Less文件与Sinatra AssetPack一起使用,但我得到的解析器错误更少。这些错误让我相信通过bootstrap.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而不是.less结尾(虽然实际的文件扩展名没有更改)。我还把一切都放在了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,这是bootstrap.less中的第一个导入。我已经尝试重新排列导入的顺序,但它没有解决问题。

是否可以让bootstrap.less中的@import语句在此设置中正常工作?

2 个答案:

答案 0 :(得分:2)

最近在AssetPack gem上有很多工作(现在内置的支持较少)。如果你更新到最新的gem,那么很少有人工作。这个要点有一个完整的例子:https://gist.github.com/4652773

答案 1 :(得分:0)

我发现的最佳解决方案是将较少文件的路径添加到Less.path数组中。无需更改任何原始较少的文件。

例如:

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