Подтвердить что ты не робот

Fontawesome + rails 4.0.1 не работает

Я использую fontawesome 3.2.1 и bootstrap 3.0.0 в моем проекте rails 4.0.1. Все мои активы находятся в поставщике/активах.

проблема заключается в том, что мой fontawesome работает в режиме разработки, когда я компилирую свои активы (производство env) и запускаю сервер в производственном env, не имея возможности загрузить font-size. ошибки равны

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

my 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 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;
}

глификоны загружаются в 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
4b9b3361

ОТВЕТЫ

Ответ 1

Я решил проблему, как указано ниже.

1) Во-первых, dont ссылаются на ресурсы внутри файла .css. Переименуйте файл в .css.scss. Это то же самое расширение, когда вы создаете контроллер, и он создает ресурсы для этого контроллера. (Javascript и css). Существует несколько приложений для преобразования css в scss. Используйте их, если css большой.

2) используйте font-path, когда вы хотите направить шрифт внутри таблицы стилей. то есть. использовать методы, предоставляемые рельсами для ссылки на активы, а не на использование '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) Во время предварительной компиляции ресурсов помощники, такие как "путь-шрифт" или "путь к ресурсам", помогают указывать на правильный актив. то есть. если и указать его как

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

в скомпилированном активе все равно будет одинаковым. в идеале это должно быть

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

Вы можете "grep" и проверить скомпилированный файл в "public/assets".

4) Другой способ убедиться, что активы загружаются, - это вызвать их из URL-адреса.

5) Пожалуйста, установите "config.assets.compress = false" в вашем файле создания или промежуточного env и запустите приложение локально в prod/промежуточном env, чтобы проверить просмотры, чтобы убедиться, что они загружаются.

Вы можете проверить https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3 для более полного понимания.

Ответ 2

Ваш svg, кажется, не скомпилирован, отпечаток пальца кажется отсутствующим, за исключением случаев, когда вы устанавливаете:

config.assets.digest = false

После предварительной компиляции я получал одинаковые "никакие маршруты, соответствующие GET". вы можете попробовать добавить svg здесь в свой config/application.rb:

config.assets.precompile += %w(*.svg)

И затем повторите попытку:

rake assets:precompile RAILS_ENV=production

В моем случае простые активы рейка: precompile недостаточно, мне нужно было указать RAILS_ENV и RAILS_GROUPS (если версия рельсов ниже 4).

Обычно скомпилированные активы находятся в каталоге public/assets.

Я надеюсь, что это поможет

UPDATE:

Еще одна идея, исходящая из моего опыта работы с ckeditor с рельсами 4 в производстве. Компиляция активов с дайджестом не работает (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

Вы можете легко заменить ckeditor на fontoresome.