[rails][bootstrap]Rails4.1でBootswatchを試すと variable @zindex-modal-background is undefined エラーが発生


[まとめ] 現在開催中のKindleセール情報はこちら

Ruby2.1.4, Rails4.1.7で確認

Bootstrapのテーマとして使用できるBootswatchを試してみました。

# Gemfile

gem 'twitter-bootswatch-rails'
gem 'twitter-bootswatch-rails-fontawesome', '~> 4.0'
gem 'twitter-bootswatch-rails-helpers'
  • テーマのインストール(今回はflatlyテーマを利用)
rails g bootswatch:install flatly
rails g bootswatch:import flatly
rails g bootswatch:layout flatly
cp app/views/layouts/flatly.html.erb app/views/layouts/application.html.erb

これで

./bin/rails s

でサーバを起動すればflatlyテーマのテンプレートが表示されるかと思ったのですが、

variable @zindex-modal-background is undefined

というエラーが発生。

色々調べてみたものの解決方法がよく分からず、普通のbootstrapに戻そうかなと思っていたら

variable @zindex-modal-background is undefined | DENPA GROOVE

こちらのブログを発見。app/assets/stylesheets/flatly/variables.less に

# app/assets/stylesheets/flatly/variables.less

@zindex-modal-background: 0;  // <= これを追加

cssにzindex-modal-backgroundを設定すれば無事に動きました。

助かりました。

とりあえずこれで先に進めそうです。

参考

[まとめ] 現在開催中のKindleセール情報はこちら