Webpack 5 - относительные URL-адреса Scss не загружают изображения

У меня есть мой scss и мои изображения в папках на одном уровне.

Структура файла

styles
  app.scss
images
  my-image.jpg

Я пытаюсь импортировать свое изображение так

app.scss

body {
  background: url(../images/my-image.jpg);
}

У меня есть простая конфигурация веб-пакета для загрузки scss и изображений.

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./resources/index.js",
  resolve: {
    alias: {
      resource: path.resolve(__dirname, "resources/images"),
    },
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist",
    filename: "main.js",
    assetModuleFilename: "[name][ext][query]",
    clean: true,
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpg)/,
        type: "asset",
      },
    ],
  },
};

Позже я попытался использовать разрешение-url-загрузчик между css-loader и scss-loader, что показалось многообещающим. Но тоже безрезультатно.

Сборка не выдает никаких ошибок. Но страница не открывает изображение.

Спасибо за любую помощь, которую вы мне оказываете, мои братаны и бронетки.