Rails 4 + bootstrap 设置资产答案

【问题标题】：Rails 4 + bootstrap set up assetsRails 4 + bootstrap 设置资产
【发布时间】：2014-02-03 02:58:41
【问题描述】：

我正在尝试使用 bootstrap-sass 在 Rails4 上设置 bootstrap，我遇到了这个著名的错误：

Sprockets::FileNotFound - couldn't find file 'bootstrap'
  (in app/assets/javascripts/application.js:16):

我尝试了以下方法：

twitter/bootstrap 在application.js
gem 'bootstrap-sass', '~> 3.1.0' 是集团外资产
还在互联网上尝试了很多其他的东西

我花了很多时间从其他帖子中获取不同的建议。我如何系统地调试这个，如何设置 bootstrap-sass？

附注： 还一直在尝试让twitter-bootstrap-rails 工作但没有运气。

这里有一些文件

应用程序.js

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap
//= require_tree .
//= require bootstrap-slider

application.css.scss

 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require_self
 *= require bootstrap-slider
 *= require_tree .
 *= stub active_admin
*/

@import "bootstrap";

宝石文件

source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'sass-rails'
gem 'coffee-rails', git: 'git://github.com/rails/coffee-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'less-rails'
gem 'therubyracer', :platform=>:ruby
#gem 'twitter-bootstrap-rails'
gem 'jquery-rails'
#gem 'jquery_mobile_rails'
gem 'js-routes'
gem 'cancan'
gem 'devise'
gem 'figaro'
gem 'haml-rails'
gem 'pg'
gem 'rolify'
gem 'sendgrid'
gem 'simple_form'
gem 'thin'
gem 'rake'

#To use db for storing cookies instead cookie-store
gem 'activerecord-session_store', github: 'rails/activerecord-session_store'

group :development do
  gem 'better_errors'
  #gem 'binding_of_caller', :platforms=>[:mri_19, :rbx]
  #Commenting out platforms part, because may be that's stopping this to be used on the dev machine'
  gem 'binding_of_caller'
  gem 'guard-bundler'
  gem 'guard-rails'
  gem 'guard-rspec'
  gem 'html2haml'
  gem 'quiet_assets'
  gem 'rb-fchange', :require=>false
  gem 'rb-fsevent', :require=>false
  gem 'rb-inotify', :require=>false

  # Required with Rails panel chrome extension. This Gem should come after better_errors gem
  gem 'meta_request'
end
group :development, :test do
  gem 'factory_girl_rails'
  gem 'rspec-rails'
  gem 'pry-byebug'
  gem 'pry-stack_explorer'
  gem 'pry-rails'
  gem 'pry-debugger'
end

group :test do
  gem 'capybara'
  gem 'database_cleaner'
  gem 'email_spec'
end

group :production do
  gem 'rails_12factor'
end

gem 'high_voltage'

#Linkedin Logins
gem "linkedin"
gem "omniauth"
gem "omniauth-linkedin"

gem "omniauth-facebook"

#postgres use hstore in active record
#gem 'activerecord-postgres-hstore'

gem 'state_machine'
gem "ruby-graphviz"


#payments
#gem 'stripe',:git => 'https://github.com/stripe/stripe-ruby'

#gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails'

gem 'newrelic_rpm'

gem 'pgbackups-archive'

gem 'pg_search'

gem 'acts-as-taggable-on'

#gem 'activeadmin' , github: 'gregbell/active_admin'
gem "activeadmin", git: "https://github.com/gregbell/active_admin"

gem 'kaminari'
gem 'bootstrap-slider-rails'
gem 'bootstrap-sass', '~> 3.1.0'

【问题讨论】：

我在运行 rake assets:precompile 时遇到了完全相同的问题，这是 Heroku 部署所必需的

标签： ruby-on-rails twitter-bootstrap ruby-on-rails-4 asset-pipeline bootstrap-sass

【解决方案1】：

安装 Bootstrap Gem

1.) 添加 Bootstrap Gem：

gem 'bootstrap-sass'

2.) 了解 Application.css 文件 app/assets/stylesheets/application.css

Application.css 获取 /stylesheets 目录中的所有其他文件，并在运行应用时将它们组合起来。

3.) 创建一个新的 SCSS 文件 (app/assets/stylesheets/bootstrap_and_customization.css.scss)

@import 'bootstrap';

4.) 需要 Bootstrap 的 JavaScript

...
//= require jquery
//= require jquery_ujs
//= require bootstrap <--
//= require turbolinks
//= require_tree .

5.) Rails 资产

group :production do
  gem 'rails_12factor'
end

6.) 捆绑安装和重启服务器

应该是这样的！

【讨论】：

这在本地工作，但 rake assets:precompile 惨遭失败，这使得部署到 Heroku 成为不可能。在网上搜索了几个小时，但没有运气。
为什么这会在生产中“悲惨地”失败，我在 Bootstrap 上部署我的所有项目已经有一段时间了。你的错误是什么？？
在我发表评论时，gem 已损坏并且在部署时无法正常工作。也许它现在可以工作，我不希望它永远被破坏。唯一的解决方案是手动下载引导源。还要提防所有其他 gems 版本，包括 rails，并且这个主题的问题也表明它不起作用，就像我检查的许多其他来源一样。无论如何，这个话题现在已经过时了，可以下载源代码并且不值得复兴 imo。

【解决方案2】：

在我的一个项目（Rails 4.1）中，我必须直接包含引导程序（不是 sass）。也许它会提示使 saas 版本正常工作。下面是直接包含引导程序的步骤：

下载并提取引导程序到 Rails.root/vendor/assets/bootstrap
创建文件 Rails.root/vendor/assets/javascripts/bootstrap.js 文件，内容如下：

//= require ../bootstrap/js/bootstrap.js
现在是使图标工作的最重要部分。对于 Glyphicons Halflings 字体，字体文件 url 必须被覆盖。还必须使用 asset_path 助手。所以创建文件 Rails.root/vendor/assets/stylesheets/bootstrap.css.erb 文件，内容如下。

/*
=require ../bootstrap/css/bootstrap.css
*/

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url("<%= asset_path 'glyphicons-halflings-regular.eot' %>");
    src: url("<%= asset_path 'glyphicons-halflings-regular.eot?#iefix' %>") format('embedded-opentype'), url("<%= asset_path 'glyphicons-halflings-regular.woff2' %>") format('woff2'), url("<%= asset_url 'glyphicons-halflings-regular.woff' %>") format('woff'), url("<%= asset_path 'glyphicons-halflings-regular.ttf' %>") format('truetype'), url("<%= asset_path 'glyphicons-halflings-regular.svg#glyphicons_halflingsregular' %>") format('svg');
}

现在需要在 application.js 和 application.css 中进行引导

应用程序.js

//= require bootstrap

应用程序.css

 *= require bootstrap

最后让资产管道了解字体路径和预编译的附加扩展。在 application.rb 添加：

config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )

之后 RAILS_ENV=production rake assets:precompile 应显示已识别字体文件并将其复制到公共资产文件夹。

然后测试它是否在生产中工作，启用提供静态资产（在 production.rb 中：config.serve_static_assets = true）和 RAILS_ENV=production rails s

【讨论】：

【解决方案3】：

我最终使用了来自托管 CDN 的引导程序

      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css", rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" , rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", rel: "stylesheet"}/

【讨论】：

【解决方案4】：

我遇到了完全相同的错误。解决方案是改变：

config/environments/production.rb

线

config.serve_static_assets = false

到

config.serve_static_assets = true

我不完全了解这条线的作用，但我的工作团队在一个项目中遇到了同样的问题，他们改变了这条线，它奏效了。

【讨论】：

这不是一个好主意。在这种情况下，静态资产（不由 Nginx 或 Apache 处理）将由 ruby 提供服务。
这是一种不好的做法，因为它是性能杀手，提供静态资产 (config.serve_static_assets = true) 仅用于开发/测试

【解决方案5】：

试试这个：

打开config/application.rb，添加下面一行：

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

在您的 config.ru 文件中，添加

 require 'bootstrap-sass'

将您的 application.css.scss 重命名为其他名称，例如custom_bootstrap.css.scss。我不知道为什么它会有所作为，但在我的情况下确实如此。

另外，据我了解，默认情况下 bootstrap-sass 不需要您添加

  //require bootstrap

到您的 application.js。显然它破坏了某种功能。

【讨论】：

【解决方案6】：

我遇到了同样的问题：找不到类型为“application/javascript”的文件“bootstrap-sprockets” 唯一的解决方案是在 Gemfile 中注释掉 gem 'sass-rails', '~> 5.0' 并添加 gem 'sass-rails', '>= 3.2'

希望对其他会员有所帮助

【讨论】：

【解决方案7】：

对我来说，解决方法是两部分……首先是我的正确列表……但仅凭列表并不是解决方法！

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

然后我遇到了 gemfile.Lock 问题...如果其他人无法加载文件并且不想使用 CDN...请检查您的 gemfile.Lock 并查看编译了哪些版本gemfile（一个是我们作为开发人员的输入，另一个是框架实际运行的内容 - 如果您尝试修改 gemfile.lock 会导致问题）。

要解决 gemfile 锁...关闭 gemfile & gemfile.Lock

我必须首先从“gemfile”中删除有问题的项目。
我为他们每个人都做了一个我想要的“gem install <name of gemfile>”。

然后打开 gemfile & gemfile.Lock 来检查结果。请注意，您仍然需要为每个配置执行引导程序等所需的所有操作。运行rails assets:precompile 也没有什么坏处。

注意：rails assets:precompile 是 rails 5 命令。

【讨论】：

【解决方案8】：

添加到 Gemfile

gem 'font-awesome-rails'

做捆绑安装

添加到 application.css

*= 需要字体很棒

然后，重新启动 Rails 服务器。

【讨论】：