Папка шрифтов Rails 5.2 в ресурсах выдает ошибку 404 (не найдено)

Question

В настоящее время я работаю над приложением Rails 5.2. Я установил npm пакет. В этом пакете есть папка fonts. В файле config/application.rb я настроил конвейер ресурсов для включения папки node_modules:

config.assets.paths << Rails.root.join('node_modules')

Это не сработало, и я все еще получаю следующие ошибки, отображаемые на изображении ниже.

Я получаю ошибку 404 (Not Found), но когда я переместил папку fonts в папку assets.

В прекомпиляции ресурсов у меня есть следующая конфигурация:

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.paths << Rails.root.join('node_modules/access-nyc-patterns/src/')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

Когда я запускаю вывод всех имен путей в ресурсах, отображается папка fonts. Почему папка fonts не загружается.

В application.scss

// if @font-face is used it needs to be first imported first.
@import 'elements/fonts/fonts';

Почему отображается эта ошибка?

Answer 1

При оформлении веб-страниц обычно используются темы, доступные в Интернете.Часто эти темы поставляются с пользовательскими шрифтами, для которых требуется источник шрифта.Правило CSS @ font-face позволяет вам задавать пользовательские шрифты в CSS.Шрифт можно загрузить с удаленного сервера или локально установленного шрифта на собственном компьютере пользователя.Чтобы предоставить шрифт с удаленного сервера, вы должны указать ресурс шрифта в функции url (), которая будет загружать и использовать шрифты.Если вы просматриваете правило @ font-face at, предоставленное данной темой, оно будет выглядеть примерно так:

@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'), url('../fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=2.2.0') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Приведенное выше правило CSS, скорее всего, вызовет 404 кода состояния в браузере в качестве клиента.пытается загрузить файлы с вашего сервера по неверному пути.«../font/» просто поднимается на один каталог из текущего и ищет каталог шрифтов.Если вы используете Rails Assets Pipeline, это не будет работать.Независимо от того, работаете ли вы в производственной среде или среде разработки, если вы используете конвейер ресурсов, Rails будет искать ресурсы в каталоге ресурсов.Теперь в работе, если вы запускаете assets: precompile, то ресурсы будут предварительно скомпилированы в публичный каталог, и все, что находится в публичном каталоге, будет иметь приоритет над чем-либо в самом приложении.Вы определенно хотите, чтобы ваши ресурсы были предварительно скомпилированы в рабочей среде, чтобы ресурсы могли быстро обслуживаться вашим веб-сервером, а не попадать в стойку Rails.

В Rails ActionView есть ActionView :: Helpers :: AssetUrlHelper, который предоставляет несколько помощников, чтобы вы могли легко ссылаться на ваши ресурсы: asset_path, font_path, image_path, video_path и т. Д. Теперь в файле CSS илиВ файле SCSS вы, очевидно, не можете использовать вспомогательные методы Rails, поскольку они определены в сценариях ruby.Следовательно, Sprockets (электростанция за конвейером активов) предоставляет функции SASS, которые вы можете использовать в самом скрипте CSS или SCSS, например функцию asset-path, как показано в документации:

background: url(asset-path("image.jpg"));                // background: url("/assets/image.jpg");
background: url(asset-path("image.jpg", $digest: true)); // background: url("/assets/image-27a8f1f96afd8d4c67a59eb9447f45bd.jpg");

Теперь, есливы не используете SASS или не хотите использовать функции SASS, вы можете напрямую ссылаться на путь ресурсов:

background: url("/assets/image.jpg");
background: url("/assets/image-27a8f1f96afd8d4c67a59eb9447f45bd.jpg");

Так что в случае @-font-family at-rule вы бы изменили источникпримерно так:

src: url('/assets/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'), url('/assets/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'), url('/assets/Material-Design-Iconic-Font.ttf?v=2.2.0') format('truetype');

ИЛИ:

src: url('asset-path(Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'), url('asset-path(Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'), url('asset-path(Material-Design-Iconic-Font.ttf?v=2.2.0') format('truetype');

Answer 2

Итак, проблема началась с перехода к URL-адресу шрифтов.Эта статья, в основном, помогла мне добавить веб-шрифты в конвейер ресурсов .

/**
 * Fonts
 */

// Dependencies
@import 'config/fonts';

@mixin font-face-all($name, $file, $weight: normal, $style: normal, $formats: ()) {
  @font-face {
    font-family: "#{$name}";
    src: url(asset-path('#{$file}.eot'));
    src: url(asset-path('#{$file}.eot?#iefix')) format('embedded-opentype'),
         url(asset-path('#{$file}.woff')) format('woff'),
         url(asset-path('#{$file}.woff2')) format('woff2'),
         url(asset-path('#{$file}.ttf')) format('truetype');
    font-weight: $weight;
    font-style: $style;
  }
}

@mixin font-face-otf($name, $file, $weight: normal, $style: normal, $formats: ()){
  @font-face {
    font-family: "#{$name}";
    src: url(asset-path('#{$file}.otf')) format('embedded-opentype');
    font-weight: $weight;
    font-style: $style;
  }
}

@mixin font-face-ttf($name, $file, $weight: normal, $style: normal, $formats: ()){
  @font-face {
    font-family: "#{$name}";
    src: url(asset-path('#{$file}.ttf')) format('truetype');
    font-weight: $weight;
    font-style: $style;
  }
}