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

Итак, проблема началась с перехода к 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;
  }
}

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

@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 (центр разработки Assets Pipeline) предоставляет функции 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');