如何使Twitter Bootstrap的Less文件与Sinatra AssetPack一起使用? [英] How do I get Twitter Bootstrap's Less files to work with Sinatra AssetPack?

问题描述

我正在尝试使用 Sinatra AssetPack 来获取Bootstrap的Less文件，但是我得到了Less解析器错误.这些错误使我相信，通过bootstrap.less导入的文件越少，彼此之间就不会意识到.

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.

我有一个app.rb文件:

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

我已经将所有缺少Bootstrap的文件复制到/app/css目录中，并修改了bootstrap.less，以便每个@import语句以.css而不是.less结尾(尽管实际的文件扩展名没有更改).我还把所有内容都放在了Github上: https://github.com/elevine/sinatra-assetpack -bootstrap

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是在mixins.less中定义的，此错误源于reset.less，这是bootstrap.less中的首次导入.我尝试重新排列导入的顺序，但是并不能解决问题.

.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.

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

推荐答案

最近有大量关于AssetPack gem的工作(现在内置的支持较少).如果您更新到最新的gem，则可以很轻松地使Less正常工作.该要点有一个完整的示例: https://gist.github.com/4652773 .

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.

这篇关于如何使Twitter Bootstrap的Less文件与Sinatra AssetPack一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！