Rails 6 + Webpacker 4 + PostCSS & @font-face + 本地字体

Question

我正在尝试在我的 rails 6 应用程序中导入字体几个小时。这是一个使用 Rails 6、Webpacker 4 和 PostCSS 的全新应用程序。

一切都通过 webpack（css、js、图像）加载（没有错误）。编译正确。图像正确显示（使用 css background:url）。

OTF/EOT/WOFF 字体：正确编译，@font-face 中的字体由 Webpack 加载和加盐。字体在视图中未正确呈现（我改为使用默认浏览器字体）。

我想我尝试了我所知道的一切。我将文件加载器切换为 url-loader 并返回，但没有成功。更改文件夹层次结构，尝试不同的字体文件，绝对网址（resolve-url-loader）。似乎没有任何效果。

任何人都会很友善地指出我正确的方向，或者分享使用 webpacker 在 rails 6 和 PostCSS 上加载的本地字体的工作配置？

预先感谢您的帮助。

这是我的配置：

javascript > 字体

raleway_thin-webfont.woff

javascript > 包 > application.js

require.context('../fonts/', true, /\.(eot|ttf|woff|woff2|otf)$/i);
import "./application.pcss";
import "js";

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");

javascript > 包 > application.pcss

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway_thin-webfont.eot'), format('eot');
}

@font-face {
  font-family: 'Amaranth';
  src: url('../fonts/Amaranth-Regular.otf'), format('otf');
}
#test-div { font-family: 'Raleway'; }

/postcss.config.js

 module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
};

/config > webpack > environment.js

const webpack = require("webpack");
const { environment } = require("@rails/webpacker");
const { VueLoaderPlugin } = require("vue-loader");
const vue = require("./loaders/vue");
// const url = require('./loaders/url');

environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery",
    Tether: "tether",
    tether: "tether",
    Popper: ["popper.js", "default"]
  })
);

["css", "moduleCss"].forEach(loaderName => {
  const loader = environment.loaders.get(loaderName);
  loader.test = /\.(p?css)$/i;
  environment.loaders.insert(loaderName, loader);
});

environment.plugins.prepend("VueLoaderPlugin", new VueLoaderPlugin());
environment.loaders.prepend("vue", vue);

// environment.loaders.prepend("url", url);
// avoid using both file and url loaders
// environment.loaders.get("file").test = /\.(tiff|ico|svg)$/i;

module.exports = environment;

/config > webpack > loaders > url（未使用）

module.exports = {
  test: [/\.eot$/, /\.otf$/, /\.ttf$/, /\.woff$/, /\.woff2$/],
  use: [
    {
      loader: "url-loader",
      options: {
        limit: 10000,
        name: "[name]-[hash].[ext]"
      }
    }
  ]
};