В Webpack, как мне получить доступ к ресурсам шрифтов в моем SCSS, используя загрузчик файлов?

Question

У меня есть все мои шрифты в /webfonts/.Некоторые из моих шрифтов находятся в подпапке в webfonts, как /webfonts/Lato.

Однако я получаю 404 для шрифтов в подпапке.

Это ошибка I 'я получаю в консоли: 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?

Это мой конфиг веб-пакета:

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
    }
};