webpack - scss cannot resolve background-image url

Question

In my scss file, I use background-image: url("../../../assets/images/home/banner-mobile.png");

The application runs successfully, but no background image is shown:

The background image URL is not resolved.

webpack/webpack.base.js

const webpack = require("webpack");
const path = require("path");

const utils = require("./utils");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    alias: {
      "@": utils.resolve("src")
    },
    extensions: ["*", ".js", ".jsx"],
    fallback: {...},
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader"
          },
          {
            loader: "sass-resources-loader",
            options: {
              resources: ["./src/assets/scss/main.scss"],
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192
            },
          },
        ],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
      inject: true,
    })
  ],
};

webpack/webpack.dev.js

const { merge } = require("webpack-merge");
const base = require("./webpack.base");

const Dotenv = require("dotenv-webpack");

module.exports = merge(base, {
  mode: "development",
  devtool: "inline-source-map",
  output: {
    publicPath: '/',
  },
  devServer: {
    port: 3000,
    static: true,
    static: 'dist'
  },
  plugins: [new Dotenv({ path: "./.env.development" })],
});

Update 1
When I view the png in Web Inspector > Sources:

When I open the image with its URL in the browser:

Update 2:
When I build and view the image via VSCode, it shows below:

Not sure if the below file-is related

webpack/Util.js

const path = require('path')

module.exports = {
  resolve: function(dir) {
    return path.join(__dirname, '..', dir)
  }
}

Plasmo

Can you confirm that the relative path is correct? It should be relative to the CSS file itself. – Microscopic

@Microscopic yes, it's correct. – Plasmo

I mean, it certainly looks like Webpack resolved some image. It didn't come up with 1caaf59….png from nothing. What do you see if you open that image URL directly? – Army

@Army If i open the png, it shows image with white background, not my image – Plasmo

But it's an actual, valid PNG image? – Army

@Army please check my above update – Plasmo

FYI, that little white square is the "not an actual image" image. Can you try building your app (so it produces static files) and see exactly what that image is? Check it in a hex editor or similar – Army

@Army PLEASE check above – Plasmo

What version of Webpack are you using? Are you aware that the url-loader is deprecated in v5? – Army

@Army Oh I am using webpack 5.64.2, but I tried below commnent still not working – Plasmo

Answer 1

Since you're using Webpack 5, I'd recommend using Asset Modules instead of the deprecated loaders

module: {
  rules: [
    // ...
    {
      test: /\.(png|jpg|gif)$/i,
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 8192
        }
      }
    }
  ]
}

I suspect you were running into a resource handling duplication issue as noted in the documentation...

When using the old assets loaders (i.e. file-loader / url-loader / raw-loader) along with Asset Module in webpack 5, you might want to stop Asset Module from processing your assets again as that would result in asset duplication. This can be done by setting asset's module type to 'javascript/auto'.

Army

Answer 2

Solution

After a long search, the only solution I found is to use ~ to reference the initial project directory and accessing public folder from there.

background-image: url("~/public/images/icon.png");

And this is working fine for me :)

OR And the other alternative would be to move images to the src directory, and this won't be a problem since webpack would pack them in a folder called static/media as static files

Stereogram

Answer 3

I use file-loader as shown in this rule, it allow me to preserve the file name and relative path, so having my folder structure like assets > images, I just have to strip "assets" from the path:

{
  test: /\.(gif|png|jpg|jpeg)$/,
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: (file) => {
      const p = file.split('assets/')[1];
      return p;
    },
  },
},

This will let you with all images within "assets" folder right into the root bundle and every path will be replicated (ex. assets/images/home/banner.png will be on images/home/banner.png in your dist directory), just be sure all your images are inside your assets folder to avoid getting name conflicts

Os