Problem with images in app.css when running with web pack


I’m working on a project in NativeScript with Angular and Typescript architecture, I’ve setup a background image for every page using CSS in app.css like this:

.container {
background-image: url("~/tools/assets/myimage.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;

using it like:

When I run the application with “tns run” it works perfectly fine but when I use webpack(“npm run start-ios-bundle”), it doesn’t show anything.

I’ve tried:

  1. With jpeg and png image
  2. With images inside custom folder ("~/tools/assets/") and also with (“res://myimage”)

What am I doing wrong?