Как загрузить шрифты с помощью Webpack

Question

У меня проблемы с правильной загрузкой шрифтов с помощью Webpack 4, и я надеюсь, что кто-то может направить меня в нужном направлении.

Моя конфигурация Webpack

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/scripts/index.js',
    mode: 'development',
    performance: { hints: false },
    output: {
        path: path.resolve(__dirname, '../build'),
        publicPath: path.resolve(__dirname, '../build'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    plugins: [
                        ['transform-class-properties'],
                        ['transform-object-rest-spread'],
                    ],
                },
            }, {
                loader: 'eslint-loader'
            }]
        }, {
            test: /\.(png|jpg|gif|json|mp4|ico)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: './assets/[name].[ext]',
                },
            }, ],
        }, {
            test: /\.(scss)$/,
            use:ExtractTextPlugin.extract({
                fallback:'style-loader',
                use: ['css-loader','sass-loader']
            }),
        }, {
            test: /\.css$/,
                use: {
                    loader: 'css-loader',
                    options: { url: false }
                }
        }, {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "file-loader"
        }, ],
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'style.css',
        }),
        new CopyWebpackPlugin(
            [{
                from: './src',
                to: './',
                force: true,
            }, ], {
                ignore: ['*.js', '*.css', '.DS_Store'],
            },
        ),
    ],
}

Моя точка входа нажимает src /scripts / index, который импортирует мой файл SCSS

import '../style/main.scss'

И в моем main.scss я импортирую другой файл scss

// Typography
@import "typography/font-face";

$base-fonts-path : '../assets/fonts';

@font-face {
    font-family: 'cardowalsheim';
    src: url('#{$base-fonts-path}/GTWalsheimProThin.eot');
    src: url('#{$base-fonts-path}/GTWalsheimProThin.eot?#iefix') format('embedded-opentype'),
    url('#{$base-fonts-path}/GTWalsheimProThin.woff') format('woff'),
    url('#{$base-fonts-path}/GTWalsheimProThin.ttf') format('truetype'),
    url('#{$base-fonts-path}/GTWalsheimProThin.svg#114f83b1372052e00fe6210ffd8e061d') format('svg');
    font-style: normal;
    font-weight: 200;
}

Я вижу, что он загружаетшрифты, но по-прежнему не отображаются на передней панели.

Когда я проверяю сетевой запрос в Chrome, кажется, что файлы переименовываются, и, возможно,причина по которой?Я не совсем уверен.