Rails 4 + bootstrap设置资产

我正在尝试使用bootstrap-sassRails4上设置bootstrap ,我收到了这个着名的错误:

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

我试过以下:

  1. application.js twitter/bootstrap
  2. gem 'bootstrap-sass', '~> 3.1.0'是组外资产
  3. 还尝试了一些互联网上的其他东西

我花了很多时间从其他post中提出不同的建议。 我如何系统地调试这个, 如何设置bootstrap-sass?

ps:也试图让twitter-bootstrap-rails没有运气。

这是一些文件

的application.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"; 

的Gemfile

 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' 

安装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.)捆绑安装和重启服务器

那应该是它!

在我的一个项目( Rails 4.1 )中,我必须直接包含引导程序( 而不是sass )。 也许它会给出一个使saas版本工作的暗示。 以下是直接包含引导程序的步骤:

  1. 下载并解压缩到Rails.root / vendor / assets / bootstrap的引导程序
  2. 使用以下内容创建文件Rails.root / vendor / assets / javascripts / bootstrap.js文件:

    //= require ../bootstrap/js/bootstrap.js

  3. 现在是使图标有效的最重要的部分。 必须为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'); } 
  1. 现在需要application.js和application.css中的bootstrap

的application.js

 //= require bootstrap 

application.css

  *= require bootstrap 
  1. 最后让资产管道知道字体路径和预编译的附加扩展。 在application.rb中添加:
 config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts") config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 ) 

之后RAILS_ENV =生产佣金资产:预编译应显示已识别的字体文件并将其复制到公共资产文件夹。

然后测试它是否在生产中工作,启用服务静态资产(在production.rb中:config.serve_static_assets = true)和RAILS_ENV =生产rails s

我最终使用托管CDN的bootstrap

  %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"}/ 

我有完全相同的错误。 解决方案是改变:

 config/environments/production.rb 

这条线

 config.serve_static_assets = false 

 config.serve_static_assets = true 

我并不完全知道这条线的作用,但是我的工作团队在项目上遇到了同样的问题,他们改变了这一行,并且它有效。

试试这个:

打开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。 显然它破坏了某种function。

我遇到了同样的问题:无法找到类型为’application / javascript’的文件’bootstrap-sprockets’唯一的解决方案是在Gemfile gem中注释’sass-rails’,’〜> 5.0’并添加代替gem’ sass-rails’,’> = 3.2′

希望这有助于其他成员

对我的修复是两个部分…我的正确列表第一…但单独的列表不是解决方案!

 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

  1. 我必须先从“gemfile”中删除有问题的项目。
  2. 我做了一个“ gem install ”我想为他们每个人。

然后打开gemfile&gemfile.Lock来检查结果。 注意,您仍然需要为每个配置执行所有配置bootstrap等要求。 运行rails assets:precompile并没有坏处rails assets:precompile

注意:rails资产:precompile是rails 5命令。

添加到Gemfile

gem’font-awesome-rails’

捆绑安装

添加到application.css

* =要求font-awesome

并重新启动rails服务器。