Question

我尝试用Rails 4做更少的风格，并遇到一些问题。我将一些宝石安装到Gemfile以获得Twitter Bootstrap布局（版本2.x）

gem "less-rails"
gem "twitter-bootstrap-rails"

一切正常，我将此行添加到app/assets/stylesheets/application.css.less（注意：我已将.css重命名为.css.less以进行测试，我希望它有效）

*= require_self
*= require bootstrap_and_overrides.css.less

然后，我安装了selectize.js插件（http://brianreavis.github.io/selectize.js/）

所以我将特定的较少文件放入app/assets/stylesheets：

selectize.bootstrap2.less
selectize.less
plugins/*some_less_files*

并更新application.css.less以添加

*= require selectize.bootstrap2.less

当我运行我的应用程序时，我收到了这个错误：

Showing app/views/layouts/application.html.erb where line #5 raised:
variable @inputBorderRadius is undefined
  (in app/assets/stylesheets/selectize.bootstrap2.less)

app/assets/stylesheets/selectize.bootstrap2.less包含以下行：

@selectize-border-radius: @inputBorderRadius;

我不明白为什么它失败了，因为@inputBorderRadius是用bootstrap_and_overrides.css.less定义的，在这个文件中：

/.rvm/gems/ruby-2.1.0/gems/twitter-bootstrap-rails-2.2.8/vendor/toolkit/twitter/bootstrap/variables.less

此文件由bootstrap_and_overrides.css.less导入，导入（gem）文件twitter/bootstrap/bootstrap，导入（gem）文件twitter/bootstrap/variables.less

......出了什么问题？

Answer 1

我没有selectize.js的经验，但可能是你的application.css文件中的加载顺序错误。如果在bootstrap_and_overrides之前调用bootstrap2.css.less，它将不知道@inputBorderRadius。

不过，这个宝石可能会派上用场：https://github.com/manuelvanrijn/selectize-rails。它为selectize.js提供了一个rails引擎。这些宝石通常可以解决资产管道方面的麻烦。

Rails 4 Stylesheets loading（twitter bootstrap and less）

1 个答案: