我在我的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')}
我确实尝试了几个解决方案,例如将'font'或'assets'添加到'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
prasad.suras.. 10
我解决了下面指定的问题.
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'并查看"public/assets"中的编译文件.
4)确保资产加载的另一种方法是从url调用它们.
5)请在生产或登台env文件中设置'config.assets.compress = false'并在prod/staging env中本地运行应用程序,以便检查视图以确保资源正在加载.
您可以查看https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3提交以获取更多信息.
我解决了下面指定的问题.
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'并查看"public/assets"中的编译文件.
4)确保资产加载的另一种方法是从url调用它们.
5)请在生产或登台env文件中设置'config.assets.compress = false'并在prod/staging env中本地运行应用程序,以便检查视图以确保资源正在加载.
您可以查看https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3提交以获取更多信息.
您的svg似乎没有编译,指纹似乎丢失,除非您设置:
config.assets.digest = false
预编译后我得到了相同的"没有路由匹配GET".你可以尝试在config/application.rb中添加svg:
config.assets.precompile += %w(*.svg)
然后重试一次:
rake assets:precompile RAILS_ENV=production
在我的例子中,一个简单的rake资产:预编译是不够的我需要指定RAILS_ENV和RAILS_GROUPS(如果rails的版本低于4).
通常,编译的资产位于public/assets目录中.
我希望它有所帮助
更新:
另一个想法来自于我在生产中使用带有导轨4的ckeditor的经验.使用摘要的资产编译无效(https://github.com/galetahub/ckeditor).您需要添加一个rake任务,在编译后复制/修改public/assets目录中的某些文件.这是代码:
namespace :ckeditor do desc 'Create nondigest versions of some ckeditor assets (e.g. moono skin png)' task :create_nondigest_assets do fingerprint = /\-[0-9a-f]{32}\./ for file in Dir['public/assets/ckeditor/contents-*.css', 'public/assets/ckeditor/skins/moono/*.png'] next unless file =~ fingerprint nondigest = file.sub fingerprint, '.' # contents-0d8ffa186a00f5063461bc0ba0d96087.css => contents.css FileUtils.cp file, nondigest, verbose: true end end end # auto run ckeditor:create_nondigest_assets after assets:precompile Rake::Task['assets:precompile'].enhance do Rake::Task['ckeditor:create_nondigest_assets'].invoke end
您可以使用fontawsome轻松替换ckeditor.