Загрузчик файлов webpack не разрешается после определенной глубины

Question

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

Это моя структура каталогов внутри <root>/assets/src/components/contexts:

├── HeaderContext.js
├── IconContext.js
├── single-article.scss
└── wot

отдельная статья.scss

@import '../../scss/utility/essential.scss';

essential.scss импортирует много частей, один из которых импортирует файлы шрифтов.

webpack.config.js

const path = require( 'path' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const webpack = require( 'webpack' );
const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );

const dev = ( 'development' === process.env.NODE_ENV ) ? true : false;

const config = {
    context: path.resolve( __dirname, 'assets' ),
    entry: {
        fontest: './src/components/contexts/single-article.scss',
    },
    output: {
        path: path.resolve( __dirname, 'assets/dist' ),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            outputStyle: dev ? 'expanded' : 'compressed',
                            indentType: 'tab',
                            indentWidth: 1,
                            options: {
                                sourceMap: true,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.svg$/,
                loader: 'svg-url-loader',
            },
            {
                test: /\.woff/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/',
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin( {
            filename: '[name].css',
        } ),
    ],
};

if ( ! dev ) {
    config.plugins.push(
        new webpack.SourceMapDevToolPlugin( {
            filename: '[name].js.map',
            test: [
                /\.js$/,
                /\.css$/,
            ],
            exclude: [
                'intersection-observer.js',
                'lazyload.js',
            ],
        } )
    );

    config.plugins.push(
        new OptimizeCssAssetsPlugin( {
            cssProcessor: require( 'cssnano' ),
            cssProcessorPluginOptions: {
                preset: [ 'default', { discardComments: { removeAll: true } } ],
            },
        } )
    );
}

module.exports = () => {
    return config;
};

Все работает доздесь, но если я переместу файл single-article.scss в каталог wot/, это выдаст ошибку:

Модуль не найден: Ошибка: не удается разрешить '../../fonts/Graphik-Black-Web.woff 'in' / Пользователи / sthevaril / Документы / проекты / nu-wp-tls / src / themes / tls / assets / src / components / contexts / wot '

IЯ пытаюсь отлаживать это часами, но безуспешно. Есть ли ограничение по глубине в загрузчике файлов?

И да, я обновляю webpack.config.js и путь к essential.scss после перемещения файла.