与Webpack捆绑在一起时，TTF字体不会显示在浏览器中

Question

我正在尝试将静态网页与webpack捆绑在一起。 npm run build在压缩并发送到dist文件中的所有javascript，sass以及字体和图像资产后都可以正常工作。 问题是浏览器没有显示我的字体。 这是我的webpack配置文件的样子

module.exports = {
  entry: './public/app.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.(scss)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/images'
          } 
        }
      ]
    },
       {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/fonts'
          } 
        }
        ]
      }
    ]
  }
}

我尝试使用字体加载器，尝试使用URL加载器，尝试使用专用于ttf的加载器，即ttf-loader。 我已经尝试按照上面的建议对上面引用的代码进行各种排列，还尝试将sourceMap = true添加到sass loader。 我试过将字体转换为其他格式，但是没有运气。

我的猜测是，我在Sass文件中导入字体的方式有问题，因为构建时表面上没有任何错误。

@font-face {
  font-family: "Oswald-Light";
  src: url("../assets/fonts/Oswald-Light.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Oswald-Regular";
  src: url("../assets/fonts/Oswald-Regular.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Regular.ttf") format("truetype"),
       url("../assets/fonts/Lato-Regular.ttf") format("truetype");
}

上面的任何代码有明显的错误吗？

Answer 1

对于将来遇到其他麻烦的人-看到一些线程在问类似的问题-请考虑使用Google字体，然后在头中插入一个链接标签。

<link href="https://fonts.googleapis.com/css?family=Lato|Oswald&display=swap" rel="stylesheet">