Как настроить чтобы Webpack понимал, что в scss файле есть путь на изображение?

Question

[Alexander3928]

Webpack не понимает что в scss есть путь к изображению. Лоадер нужный добавил. Что я забыл сделать или указать?

form__preview-delete {
    position: absolute;
    inset: 0 0 0 0;
    transition: 0.4s;
    &:hover {
      background-color:  roalblue
    }
    &::before {
      content: "";
      background-image: url("../../img/contact-image/delete.png");
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 48px; height: 48px;
    }
  }

{
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },

Comments

[Александр Васильев]

Какая версия вебпака?

[Alexander3928]

Александр Васильев,

"webpack": "^5.72.1",

"webpack-cli": "^4.9.2"

[Александр Васильев]

Alexander3928, вот так попробуйте background-image: url("~/путь к картинке");
ну и потом еще вот это https://qna.habr.com/q/840831

[Alexander3928]

Александр Васильев, именно путь к картинки или сама картинка?

[Александр Васильев]

Alexander3928, background-image: url("~/assets/img/image.jpg");

[Alexander3928]

Александр Васильев,

background-image: url("~/assets/img/contact-image/delete.png");

если так, ошибку выдает

[Александр Васильев]

Alexander3928, Это точно Ваш путь?

[Alexander3928]

Александр Васильев, Вот такой путь у меня к этому файлу

[Александр Васильев]

Alexander3928, в нем же нет assets, пишите свой путь

[Alexander3928]

Александр Васильев, Ну окей, указал

background-image: url("~/web/src/img/contact-image/delete.png");

тоже ошибка.