hello-world
webエンジニアのメモ。とりあえずやってみる。

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

公開日時

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を設定すれば無事に動きました。

助かりました。

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

参考


Related #bootstrap

[js][bootstrap]bootstrap-sliderを使ってスライダーをつくる

TwitterBootstrapを使っていた際に、スライダーで音量調節ができるようにしようと思ったのですが公式ドキュメントを見ても見つからず、調べていたら bootstrap-sliderというライブラリを発見 サンプルにもありますが、

[Rails]日付と時間の入力フォームにDateTimePickerを使う(bootstrap3-datetimepicker-rails)

Ruby2.1.0, Rails4.1で確認 フォームで日時を入力する際に、カレンダーを表示して入力サポートをするDateTimePickerを導入したかったので調べてみました。