Glyphicon在本地工作但不在Heroku上工作
如果你在这里查看我的应用程序: http : //quiet-brushlands-5712.herokuapp.com/ ,靠近按钮的是一个图标,一个glyphicon。 但它没有出现在heroku上。 在本地它显示如下:
我从这里尝试了“解决方案” 在Rails production / heroku w / o LESS或SASS以及谷歌的其他链接中使用boostrap.css文件 。 我也需要在Heroku上显示字形。 有帮助吗?
我没有手动下载Twitter Bootstrap,我只是使用了一个gem。 在我的Javascript控制台中,我有这个:
GET http://quiet-brushlands-5712.herokuapp.com/assets/glyphicons-halflings.png 404 (Not Found)
我的Gemfile如果有帮助:
source 'https://rubygems.org' gem 'rails', '4.0.2' gem 'sass-rails', '~> 4.0.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails', '3.0.4' gem 'turbolinks', '2.0.0' gem 'jbuilder', '~> 1.2' gem 'bootstrap-sass', '2.1' gem 'jquery-ui-rails', '4.1.0' gem 'pg' gem 'font-awesome-rails', '4.0.3.0' group :doc do # bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', require: false end group :development, :test do gem 'rspec-rails', '2.11.0' gem 'guard-rspec', '1.2.1' gem 'guard-spork', '1.2.0' gem 'childprocess', '0.3.6' gem 'spork', '0.9.2' end group :production do gem 'rails_12factor' end
解决方案是在config/environments/production.rb
文件中将config.assets.compile = false
更改为config.assets.compile = true
。
不使用编译回退的解决方案(在Rails 4.1上测试):在scss文件中,在bootstrap之前导入bootstrap-sprockets。
@import "bootstrap-sprockets"; @import "bootstrap";
继Vidya的评论之后,这可能是你的资产管道问题
虽然我对此不熟悉Bootstrap的细节,但Heroku的资产管道存在一个主要问题,即必须先进行预编译才能有效地使用它
资产指纹识别
由于资产指纹识别, Heroku要求您预编译资产
这是您的资产将在其文件名末尾应用哈希的位置,如image-12sdafdsafkj223423jnjfadsnfsad.png
或类似名称。 这样做的原因显然是为了保持资产的独特性
如果您按照Vidya提供的链接 ,您会发现Heroku会提示您使用Rails CMD预编译您的资产。 它没有告诉你的是,除非动态分配,否则这会弄乱你的图像
SCSS
如上所述,我不确定具体如何适用于Bootstrap,但使用Heroku的资产管道,您需要确保使用动态路径分配图像
与Rails本身一样,SCSS允许您使用asset_path
或image_path
来创建动态链接。 这是您必须要解决的问题。 这是我们使用的一些代码,适用于Heroku:
.navigation_bar { z-index: 200; position: relative; background: asset_url('nav_bar/bg.png') repeat-x top; }
如果您不想在生产环境中将config.assets.compile
设置为true(您可能不应该为了更好的性能),则可以在使用rake assets:precompile RAILS_ENV=production
推送到heroku之前手动预编译rake assets:precompile RAILS_ENV=production
在config/environments/production.rb
将config.assets.compile = false
更改为config.assets.compile = true
(然后不要忘记提交并推送到heroku)
为我工作……
因为我在搜索时得到了这个答案,我想我应该在这里说我遇到的解决方案是在bootstrap之前包含一个导入到“bootstrap-sprockets”。 这在https://github.com/twbs/bootstrap-sass/issues/653中有记录。
我意识到问题不是使用bootstrap-sass 3.2+,但我认为这可能有助于某人。