似乎这是一个非常普遍的问题，但我找不到任何解决方案。我正在使用webpack 4.41.2创建一个项目，在这里我需要使用本地字体。字体通过@ font-face上传。它们是：

@font-face {
    font-family: 'Roboto Slab',serif;
    font-style: normal;
    font-weight: 400;
    src:
        url('./fonts/robotoslab-regular-webfont.woff') format('woff'),url('./fonts/RobotoSlab-Regular.ttf') format('truetype');
}

，还有一些像第一个。结构如下：

I can't publish pics yet,but here's a link to screenshot

所以一切都应该没事。

我的配置：

{
  test: /\.(ttf|eot|woff|woff2)$/,use: {
      loader: "file-loader",options: {
          name: "fonts/[name].[ext]",publicPath: "",},

在dist文件夹中，一切都像这样：

I can't publish pics yet,but here's a link to screenshot

但是，甚至在我在这里创建文件夹之前，@ font-face都不起作用。

奇怪的部分：

• dev工具不会显示任何错误；
• @ font.css中的导入效果很好（我只需要在项目中使用本地字体即可）；
• fonts文件夹未显示在开发工具源中。

构建/开发中也没有错误。

以前，我在向Webpack加载CSS背景图像时遇到了这个问题，我通过向MiniCssExtractPlugin.loader选项中添加publicPath: '../'来解决了这个问题。它显然不适用于字体。