Webpack 5 - Scss relative urls won't load images

Question

I have my scss and my images in folders at the same level.

File structure

styles
  app.scss
images
  my-image.jpg

Am trying to import my image like so

app.scss

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

I have a simple webpack configuration to load scss and images.

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",
      },
    ],
  },
};

Later on I tried to use resolve-url-loader between css-loader and scss-loader which seemed promising. But also to no avail.

The build isn't throwing any errors. But the page doesn't open the image.

Thank you for any help you give me my bros and bronettes.

Answer 1

At the end the problem with the images was simply in the publicPath on the web.config.js file.

Changing it from dist/ to /dist did the job.

const path = require("path");

module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "dist/", //This is where the issue was
    filename: "main.js",
    assetModuleFilename: "[name][ext][query]",
    clean: true,
  },
  ...
};

Let this be a warning for all ye who enter webpack.