Problem with webpack, why don't relative paths in css work in dev mode?

Question

css

When saving some css file, I constantly get an error ModuleNotFoundError: Module not found: Error: Can't resolve '../img/BG.jpg' in 'C:\WebServers\OSPanel\domains\web-design.loc\ project\src\sass' when I write the path to some file, for example

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

And so it works fine, the problem is with the paths.
Here is the config itself:

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,
  }
}