Background image path problem in Scss when built in Vite

Question

The background image path I give in scss is not extracted to a folder when I build. The background image path I give in scss (example: "./image.png") is shown the same when I build. The background images I use are in the "public" folder. How can I make sure that the image address in the css is "dist/img/image.png" when I build?

My vite.config.ts

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
   base: '',
   resolve: {
       alias: {
           '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')
       },
   },
   build: {
       outDir: 'dist',
       rollupOptions: {
           input: {
               index: './src/js/index.ts'
           },
           output: {
               entryFileNames: 'js/[name].js',
               chunkFileNames: 'js/[name].js',
               assetFileNames: ({name}) => {
                   if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')){
                       return 'img/[name][extname]';
                   }
                
                   if (/\.css$/.test(name ?? '')) {
                       return 'css/[name][extname]';   
                   }
      
                   return 'img/[name][extname]';
               },
           }
       },
   },
});