読者です 読者をやめる 読者になる 読者になる

Sinatra で twitter bootstrap v2.3.0

Sinatra で bootstrap 使おうとしてはまったのでめも。

たぶん今しか使えない情報。

へたれなので現時点の最新のdocumentが使える 2.3 をゲット

https://github.com/twitter/bootstrapをcloneして、

git checkout -b v2.3.0 

で 2.3に

それぞれの js, less, img フォルダをsinatraでpublic_folderに設定したところの下にコピーしてくる。

自分は下のようにした

./public/js/bootstrap
./public/css/bootstrap
./public/img/bootstrap

overrideするlessを置く

自分は./public/css/override.lessに置いた

// import bootstrap
@import "./bootstrap/bootstrap.less";

// change path to image.
@iconSpritePath: "../img/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/bootstrap/glyphicons-halflings-white.png";

まず普通にGemfileに追加

source :rubygems

gem "sinatra"
gem "less"

それっぽくかいてみる

某掲示板のanswerをそのまま書いてみる。

require 'less'
require 'sinatra/base'

class App < Sinatra::Base
  # Make LESS @import statements work
  Less.paths << settings.views

  # Use LESS for CSS
  get '/stylesheets/:style.css' do
    less(params[:style].to_sym)
  end
end

しかしエラー

pathが見つからない云々いわれる。

いろいろ試しながらソースよんでいくと、cssディレクトリにoverride.less置くには直接viewsオプションを指定しないといけないっぽ。

get "/css/:style.css" do
  less(params[:style].to_sym, views: "#{dirname}/web/public/css")
end

いけた、、とおもってアクセスすると

Less::Error - Cannot call method 'charAt' of undefined

。。。わからん( ̄Д ̄;)

よくよく調べてみると、bootstrap 2.3 で使われている less のversionにless.rbが対応してないっぽい

対応されているこのコミットのverをありがたく使わしていただくことにする。

gem "less", git: "https://github.com/populr/less.rb", branch: "v2.2.2-less1.3.3", submodules: true

submodules: true はなぜか(gitリポジトリを直接指定しているから?)だと submoduleのjs(JSのless)をdlしてこなかったから。

これでやっとみれた!ヾ(@^▽^@)ノ