css - Rails 4 样式表加载(twitter bootstrap 和更少)

Question

我尝试使用 Rails 4 或更低版本做一些样式，但遇到了一些问题。我将一些 gem 安装到 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/ )

所以我将特定的 less 文件放入 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)文件推特/bootstrap/variables.less

...怎么了？

Answer 1

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

顺便说一句，这个 gem 可能会派上用场:https://github.com/manuelvanrijn/selectize-rails .它为 selectize.js 提供了一个 Rails 引擎。这些 gem 通常可以解决有关 Assets 管道的问题。