I try to do some style with Rails 4 and less, and got some problems.
I install some gems into Gemfile to get Twitter Bootstrap layout (version 2.x)
gem "less-rails"
gem "twitter-bootstrap-rails"
All is working fine, I have this lines into app/assets/stylesheets/application.css.less (note: I've renamed .css into .css.less for doing tests, I hope it works)
*= require_self
*= require bootstrap_and_overrides.css.less
Then, I installed selectize.js plugin ( http://brianreavis.github.io/selectize.js/ )
So I put specific less files into app/assets/stylesheets :
selectize.bootstrap2.less
selectize.less
plugins/*some_less_files*
and update application.css.less to add
*= require selectize.bootstrap2.less
When I run my application, I got this error :
Showing app/views/layouts/application.html.erb where line #5 raised:
variable @inputBorderRadius is undefined
(in app/assets/stylesheets/selectize.bootstrap2.less)
The app/assets/stylesheets/selectize.bootstrap2.less contains this line :
@selectize-border-radius: @inputBorderRadius;
I don't understand why it fails, because @inputBorderRadius is defined with bootstrap_and_overrides.css.less, in this file :
/.rvm/gems/ruby-2.1.0/gems/twitter-bootstrap-rails-2.2.8/vendor/toolkit/twitter/bootstrap/variables.less
And this file is imported by bootstrap_and_overrides.css.less, which import (gem) file twitter/bootstrap/bootstrap, which import (gem) file twitter/bootstrap/variables.less
... what's wrong ?
I have no experience with selectize.js, but it could be the load order in your application.css file is wrong. If you call bootstrap2.css.less before bootstrap_and_overrides it would have no knowledge about @inputBorderRadius.
Btw, this gem might come in handy:https://github.com/manuelvanrijn/selectize-rails. It provides a rails engine for selectize.js. These kind of gems usually solve trouble concerning the asset pipeline.