ruby-on-rails - @rails/webpacker でローカル フォントを読み込むにはどうすればよいですか?

Question

@rails/webpackerでローカル フォント ファイルを読み込む際に問題が発生しています。フォントは開発環境に読み込まれますが、運用環境には読み込まれません。それは本当に単純な問題のように思えますが、私はそれでとても苦労しました。以下は私の @font-face コードです。私のフォントは app/assets/images/fonts に保存されています

アプリ > アセット > スタイルシート >config > _fonts.scss

@font-face {
  font-family: "Axiforma";
  src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
    url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

プロダクション モードでフォント ファイルを取得すると、404 エラーが発生します。アセットをプリコンパイルすると、フォント ファイルのファイル名にハッシュが追加されていることがわかります。ブラウザーに配信される css ファイルでは、フォント ファイルへの URL は変更されません。これを修正するために、環境モジュールのルールでfile-loader、url-loader、resolve-url-loaderを使用しようとしましたが、まだ役に立ちませんでした。以下は、webpack構成ファイルでの私の試みです。

config > webpack > environment.js

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
);

environment.module = {
  rules: [
    {
      test: /\.(scss|sass|css)$/i,
      use: [
        { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production' } },
        { loader: 'postcss-loader', options: { sourceMap: true } },
        'resolve-url-loader',
        { loader: 'sass-loader', options: { sourceMap: true } }
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'file-loader',
          limit: '100000'
        }
      ],
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      use: [
        {
          loader: 'url-loader',
          limit: '100000'
        }
      ]
    }
  ]
};

module.exports = environment;

どんな助けでも大歓迎です:)