使用 @ rails / webpacker 加载本地字体文件时遇到问题。字体加载在开发环境中，而不在生产环境中。这似乎是一个非常简单的问题，但是我遇到了很多麻烦。下面是我的@ font-face代码。我的字体存储在app / assets / images / fonts

app>资产>样式表> 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;

任何帮助将不胜感激：）