Rails 资产管道和 Twitter Bootstrap Gem答案

【问题标题】：Rails Asset Pipeline and Twitter Bootstrap GemRails 资产管道和 Twitter Bootstrap Gem
【发布时间】：2012-05-15 15:32:25
【问题描述】：

我正在使用 bootstrap-rails gem 的最新 master 分支，并尝试以与 rails 资产管道兼容的方式修改默认引导变量。

我的 gem 文件包含了这些 gem

gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'less-rails-bootstrap'

我还将*= require bootstrap_and_overrides 包含在我的application.css 文件中。我知道 sprockets 会单独编译每个 css 文件，因此您不能期望多个 css 文件能够相互引用。因此 bootstrap_and_overrides.css.less 文件包含以下内容：

@import "twitter/bootstrap/bootstrap";
body { padding-top: 80px; }

//background-image: asset-url("background.png"); background-repeat:no-repeat; background-size: cover;  }

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-path('fontawesome-webfont.eot');
@fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff');
@fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf');
@fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz');
@fontAwesomeSvgPath: asset-path('fontawesome-webfont.svg');

// Font Awesome
@import "fontawesome";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

@navbarHeight: 60px;
@navbarText: @white;
@textColor: @orange;
@navbarLinkColor: @white;
@navbarBackground: darken(@linkColor, 15%);
@navbarBackgroundHighlight: @linkColor;

但是，我的任何覆盖都不能在资产管道下工作。没有它他们工作得很好。有人知道为什么吗？

更新我的资产 Gem Group

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'less-rails'
  #  gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platform => :ruby
  gem 'uglifier', '>= 1.0.3'
end

【问题讨论】：

您的资产组中有less-rails gem吗？
我愿意，我的 gem 资产组更新了问题

标签： ruby-on-rails-3 twitter-bootstrap asset-pipeline ruby-on-rails-3.2 sprockets

【解决方案1】：

在部署之前在本地运行rake assets:precompile 解决了我上面的问题。

【讨论】：

【解决方案2】：

在我的例子中，资产管道引擎寻找资源的目录没有正确设置，导致资产没有正确编译。

我正在使用 bootstrap-sass，所以您的情况可能会有所不同。但就我而言，将以下代码添加到 application.rb 解决了我的问题。

module ApplicationModuleName
  class Application < Rails::Application

    config.sass.load_paths = []
    config.sass.load_paths << "#{Rails.root}/app/assets/stylesheets"
    %w(bootstrap-sass jstree-rails jquery-rails).each do |pkg|
      config.sass.load_paths << "#{Gem.loaded_specs[pkg].full_gem_path}/vendor/assets/stylesheets"
      config.assets.paths << "#{Gem.loaded_specs[pkg].full_gem_path}/vendor/assets/javascripts"
    end
  end
end

在应用上述（丑陋的）补丁之前，尝试运行rails console 并检查load_paths 的值或类似的值..

【讨论】：

上述补丁无效，因为sass 不是config 的属性。我收到这些错误：/app/vendor/bundle/ruby/1.9.1/gems/railties-3.2.3/lib/rails/railtie/configuration.rb:85:in method_missing: undefined method sass for #<Rails::Application::Configuration:0x000000024ace08> (NoMethodError)
我在上一篇文章中删除了模块和类包装器。正确编辑了示例。
感谢您分享您的方法，尽管我在部署之前通过在本地运行 rake assets:precompile 解决了我的问题，并且一切都得到了修复。
好..那么，我认为这不是我提到的 load_paths 问题。

【解决方案3】：

我在 rails 4.1 和 ruby 2.0 中使用较少的引导程序，但我通过将其添加到 application.css.scss 来解决此问题

*= require_tree .
*= require bootstrap_and_overrides
*= require_self

【讨论】：