Vue Vite Webpack doesn't compile the background image - css

Question

I'm using VUE Vite and Webpack to compile the files. My problem is the following:
If i set my background image for the body tag in css then I can see the background in the develper verson in the browser. After creating the webpack files it won't use the background.
It seems like it doesnt compile the background. Does anyone know why this issue happens?
I appreciate any kind of help and suggestions.
My Folder structure is the following:
Code:
<template>
<div class="d-flex align-items-center justify-content-center vh-100">
<form>
<div class="mb-3">
<input type="email" class="form-control input-style-1" placeholder="Email eingeben" v-model="email">
</div>
<div class="mb-3">
<input type="password" class="form-control input-style-1" placeholder="Passwort eingeben" v-model="password">
</div>
<div class="d-grid">
<button class="btn btn-primary button-style-1" type="button" #click="login">Einloggen</button>
</div>
<div class="d-grid">
<router-link class="text-white mt-3" to="/register">Neuen Account erstellen</router-link>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'Login',
data: function() {
return {
email: '',
password: ''
}
},
methods: {
async login(){
if(this.email == "" || this.password == "") return;
await window.rpc.callServer("sLoginUser", [this.email, this.password]);
}
}
}
</script>
<style>
body {
background: url("./images/background.jpg") !important;
}
</style>