Body background image scss vue asset missing

I just finished my Vue app and was ready to deploy. After deploying to staging, the background image is missing. When I check the console, I see the path:

https://632c3be20c0c390ad1480ba9--xxx.netlify.app/assets/~@/assets/img/bg.png

So it seems its not compiling it correctly?

Here is my code:

body {
  font-family: $bodytext;
  font-size: 10px;
  font-weight: 400;
  color: $bodycolor;
  background-image: url('~@/assets/img/bg.png');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  background-attachment: fixed;
}

And here are some screenshots from the build and the error in the browser.

What exactly am I doing wrong?

And here is my package.json:

{
  "name": "vue-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
    "bootstrap": "^5.2.1",
    "bootstrap-vue": "^2.22.0",
    "jquery": "^3.6.1",
    "node-sass": "^7.0.3",
    "popper.js": "^1.16.1",
    "sass-loader": "^13.0.2",
    "vue": "^2.7.10",
    "vue-router": "^3.5.4"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "sass": "^1.54.9",
    "terser": "^5.14.2",
    "vite": "^3.0.2"
  }
}

And my vite.config file:

import { fileURLToPath, URL } from 'node:url' 

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import vue2 from '@vitejs/plugin-vue2'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue2(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})