Webpack文件加载器在一定深度后无法解析

Question

我正在尝试使用file-loader导入字体，并且只能在一定深度下使用。

这是我在<root>/assets/src/components/contexts中的目录结构：

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

single-article.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/目录中，则会出现错误：

  

未找到模块：错误：无法解析'/ Users / sthevaril / Documents / projects / nu-wp-tls / src / themes中的'../../fonts/Graphik-Black-Web.woff' / tls / assets / src / components / contexts / wot'

我正在尝试调试数小时，但没有运气。文件加载器的深度有限制吗？

是的，移动文件后，我正在更新webpack.config.js和essential.scss的路径。