如何使用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上检查网络请求时，似乎重命名了文件，可能是原因？我不太确定。