在Webpack中，如何使用文件加载器访问SCSS中的字体资源？

Question

我所有的字体都放在/webfonts/中。我的某些字体位于webfonts中的子文件夹中，例如/webfonts/Lato。

但是，我在子文件夹中得到的字体是404。

这是我在控制台中遇到的错误： Failed to load resource: the server responded with a status of 404 (Not Found)

我正在这样将字体导入我的scss文件中：

@font-face {
    font-family: 'Lato';
    src: url('../webfonts/lato/Lato-Light.ttf');
    font-weight: $light;
    font-style: normal;
}

如何在scss中访问这些字体资源？

这是我的webpack配置：

module.exports = {
    mode: 'development',
    entry: ['babel-polyfill', './app.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.min.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    plugins: [
                        'transform-class-properties',
                        'transform-object-rest-spread'
                    ],
                    presets: ['env', 'react']
                }
            },
            {
                test: /\.js$/,
                use: ["source-map-loader"],
                enforce: "pre"
            },
            {
                test: /\.(scss|sass|css)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]'
                    }
                }]
            },
            {
              test: /\.svg$/,
              loader: 'svg-url-loader',
              options: {
                limit: 10 * 1024,
                noquotes: true,
              }
            }
          ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map',
    devServer: {
        port: 8080,
        hot: true
    }
};