Настройка путей к картинкам в sass, используя webpack

Возникла небольшая проблема, я работаю с дев-сервером и sass лоадером в вебпаке. Когда указываю пути к картинкам через sass, не могу достучаться до них. Не понимаю, как решить такую проблему.

Настройки вебпака

const path = require('path');

/* *********** plugins *********** */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

const optimization = () => {

    const config = {};

    if (isProd) {
        config.minimizer = [
            new OptimizeCssAssetWebpackPlugin(),
            new TerserWebpackPlugin()
        ];
    }

    return config;
};

module.exports = {

    mode: 'development',

    entry: {
        main: path.resolve(__dirname, './src/js/main.js')
    },

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },

    optimization: optimization(),

    devServer: {
        historyApiFallback: true,
        // contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
        watchContentBase: true
    },

    plugins: [
        /* *********** HTML Webpack plugin *********** */
        new HtmlWebpackPlugin({
            title: 'Akaev webpack template',
            template: path.resolve(__dirname, './src/index.html'),
            filename: path.resolve(__dirname, './dist/index.html'),
            inject: 'body'
        }),

        /* *********** Clean Webpack plugin *********** */
        new CleanWebpackPlugin(),

        new MiniCssExtractPlugin({
            filename: 'bundle.css'
        }),

        /* *********** Copy webpack plugin *********** */
        new CopyWebpackPlugin({
            patterns: [
                {

                    from: path.resolve(__dirname, './src/img'),
                    to: path.resolve(__dirname, './dist/img')
                },
                // {
                //  from: path.resolve(__dirname, './src/fonts/'),
                //  to: path.resolve(__dirname, './dist/fonts/'),
                // }
            ]
        })

    ],

    module: {
        rules: [
            /* *********** Babel *********** */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },

        ]
    }

};

Архитектура проекта. Сам файл sass находится по пути src/sass/sections/_intro_section.sass

Ошибка происходит, когда я добавляю путь к картинкам через sass таким образом:

.intro__person
    background-image: url(img/person.png)

Слышал, что данную проблему можно решить с помощью publicPath, но никак не могу понять, как его настроить