Проблема с webpack, почему не работают относительные пути в css в режиме dev?

Question

[Gam Kit]

При сохранении какого нибудь css файла, мне постоянно выкидывает ошибку ModuleNotFoundError: Module not found: Error: Can't resolve '../img/BG.jpg' in 'C:\WebServers\OSPanel\domains\web-design.loc\project\src\sass' когда пишу путь к какому нибудь файлу, например

div {
	background: url('../img/BG.jpg');
}

А так он работает нормально, проблема именно с путями.
Вот сам конфиг:

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cssExtractPlugin = require('mini-css-extract-plugin');

const PATHS = {
	src: path.resolve(__dirname, './src'),
	dist: path.resolve(__dirname, './dist'),
}

module.exports = {

	entry: {
		app: `${PATHS.src}/js/index.js`
	},

	output: {
		filename: '[name].js',
		path: `${PATHS.dist}/js`,
		// publicPath: './dist'
	},

	module: {
		rules: [

			// JS

			{
				test: /\.js$/,
				use: ['babel-loader'],
				exclude: '/node_modules'
			},

			// PUG

			{
				test: /\.pug$/,
				loader: 'pug-loader',
				options: {
					pretty: true
				}
			},

			// CSS

			{
				test: /\.scss$/,
				use: ['style-loader',{
					loader: cssExtractPlugin.loader, options: {publicPath: './'}

				},

				'css-loader', 
					{
						loader: 'postcss-loader',
						options: {sourceMap: true, config: {path:`${PATHS.src}/js/postcss.config.js`}}
					},

					'sass-loader'
				]
			},

			 

		]
	},

	plugins: [
		new cssExtractPlugin({
			filename: '../css/style.min.css'
		}),

		new htmlWebpackPlugin({
			template: `${PATHS.src}/index.pug`,
			filename: `index.html`,
		})
	],

	devServer: {
		overlay: true,
		contentBase: PATHS.dist,
	}
}