ruby-on-rails-4 – fontawesome rails 4.0.1不工作

我在我的rails 4.0.1项目中使用fontawesome 3.2.1和bootstrap 3.0.0.我所有的资产都位于供应商/资产.

问题是我的fontawesome正在开发模式下,当我编译我的资产(生产环境),并在生产环境中运行服务器,它不能加载fontawesome.错误是一样的

Started GET "/assets/fontawesome-webfont.svg" for 127.0.0.1 at 2014-01-08 11:48:55 +0530

ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):
 actionpack (4.0.1) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
 actionpack (4.0.1) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'

资产为

$ls vendor/assets/
=> fonts  images  javascripts  stylesheets

$ls vendor/assets/*
=> vendor/assets/fonts:
FontAwesome.otf          fontawesome-webfont.ttf           glyphicons-halflings-   regular.svg
fontawesome-webfont.eot  fontawesome-webfont.woff          glyphicons-halflings- regular.ttf
fontawesome-webfont.svg  glyphicons-halflings-regular.eot  glyphicons-halflings-regular.woff

vendor/assets/images:
bg_direction_nav.png  bxslider  search-icon.jpg

vendor/assets/javascripts:
bootstrap  bxslider  fancybox  others  revolution_slider

vendor/assets/stylesheets:
bootstrap  bxslider  fancybox  font_awesome  others  revolution_slider

 $ls vendor/assets/stylesheets/bootstrap/
 => bootstrap.min.css

 $ls vendor/assets/stylesheets/font_awesome/
 => font-awesome.css

我的application.css是

$cat app/assets/stylesheets/application.css 
/*
* This is a manifest file that'll be compiled into application.css,which will include   all the files
* listed below.
*
* Any CSS and SCSS file within this directory,lib/assets/stylesheets,vendor/assets/stylesheets,* or vendor/assets/stylesheets of plugins,if any,can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file,but it's generally better to create a new file per style scope.
*
*= require bootstrap/bootstrap.min.css
*= require others/theme.css
*= require others/bootstrap-reset.css
*= require font_awesome/font-awesome.css
*= require bxslider/jquery.bxslider.css
*= require fancybox/jquery.fancybox.css
*= require revolution_slider/rs-style.css
*= require revolution_slider/settings.css
*= require others/flexslider.css 
*= require others/style.css
*= require others/style-responsive.css
*= require_self
*/

fontawesome加载在font-awesome.css中

@font-face {
  font-family: 'FontAwesome';
  src: url('/assets/fontawesome-webfont.eot?v=3.2.1');
  src: url('/assets/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('/assets/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('/assets/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

glyphicons被加载在bootstrap.min.css中

@font-face{
  font-family:'Glyphicons Halflings';
  src:url('/assets/glyphicons-halflings-regular.eot');
  src:url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-Opentype'),url('/assets/glyphicons-halflings-regular.woff') format('woff'),url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}

我确实尝试了一些解决方案,如“前缀”或“资产”到“url”,但没有任何工作.

–update

config / application.rb的内容

config.assets.enabled = true
config.assets.version = '1.0'

config.assets.paths += ["#{config.root}/vendor/assets/fonts","#config.root}/app/assets/images/**","#{config.root}/vendor/assets/images"]
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.eot *.svg *.ttf *.otf *.woff vendor/assets/stylesheets/**/* vendor/assets/fonts/*)

["#{config.root}/vendor/assets/javascripts","#config.root}/vendor/assets/stylesheets"].each do |d|
config.assets.precompile += Dir.glob("#{d}/*").map{|f| "#{f.gsub(d + '/','')}/**/*" if File.directory?(f)}.compact

解决方法

我解决了以下指定的问题.

1)首先,不要在.css文件中引用资产.将文件重命名为.css.scss.当你创建控制器并创建该控制器的资产时,这是相同的扩展(javascript和css).有多个应用程序将css转换为scss.如果css很大,请使用它们.

2)当您要引用样式表中的字体时,请使用font-path.即.使用rails提供的方法来引用资产而不是使用“src”
例如

@font-face {
  font-family: 'MuSEOSans-700';
  src: url(font-path('muSEOSans/244DD4_0_0.eot'));
  src: url(font-path('muSEOSans/244DD4_0_0.eot?#iefix')) format('embedded-opentype');
  src: url(font-path('muSEOSans/244DD4_0_0.woff')) format('woff');
  src: url(font-path('muSEOSans/244DD4_0_0.ttf')) format('truetype');
}

在上面的代码中,我的文件是“app / assets / stylesheets / fonts.scss”,我的字体位于

$ls vendor/assets/fonts/
  fontawesome  muSEOSans  muSEOSans500
$ls vendor/assets/fonts/muSEOSans
  244DD4_0_0.eot   244DD4_1_0.ttf   244DD4_2_0.woff  244DD4_4_0.eot   244DD4_5_0.ttf   244DD4_6_0.woff  244DD4_8_0.eot   244DD4_9_0.ttf
  244DD4_0_0.ttf   244DD4_1_0.woff  244DD4_3_0.eot   244DD4_4_0.ttf   244DD4_5_0.woff  244DD4_7_0.eot   244DD4_8_0.ttf   244DD4_9_0.woff
  244DD4_0_0.woff  244DD4_2_0.eot   244DD4_3_0.ttf   244DD4_4_0.woff  244DD4_6_0.eot   244DD4_7_0.ttf   244DD4_8_0.woff
  244DD4_1_0.eot   244DD4_2_0.ttf   244DD4_3_0.woff  244DD4_5_0.eot   244DD4_6_0.ttf   244DD4_7_0.woff  244DD4_9_0.eot

3)在资产预编译期间,像“font-path”或“asset-path”这样的帮手可以帮助指出正确的资产.即.如果你指定为

src: url('/assets/muSEOSans/244DD4_0_0.eot'));

这在编译的资产中仍然是一样的.应该是理想的

src: url('/assets/muSEOSans/244DD4_0_0-67652745236457645234dghfhsagfd64354.eot'));

您可以“grep”并查看“公共/资产”中的编译文件.

4)确定资产正在加载的另一种方法是从url中调用它们.

5)请在您的生产或分期env文件中设置’config.assets.compress = false’,并在prod / staging env本地运行应用程序,以便检查视图以确保资源正在加载.

您可以检查https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3提交更多的了解.

原文地址：https://www.jb51.cc/ruby/271569.html

ruby-on-rails-4 – fontawesome rails 4.0.1不工作

解决方法

相关推荐