Vite not converting scss file properly.

Hello everyone I'm working on creating a admin panel with vue js and bootstrap. but vite is not converting SCSS files properly.

My vite config file

	import { defineConfig } from 'vite';
	import laravel from 'laravel-vite-plugin';
	import vue from '@vitejs/plugin-vue';
	import path from 'path';
	import { sassPlugin } from './vite-plugins/sass-plugin';

	export default defineConfig({
		plugins: [
    		laravel({
        		input: ['resources/js/src/assets/sass/app.scss','resources/js/app.js'],
        		ssr: 'resources/js/ssr.js',
        		refresh: true,
    		}),
    		vue({
        		template: {
            		transformAssetUrls: {
                		base: null,
                		includeAbsolute: false,
            		},
        		},
    		}),
    		sassPlugin()
		],
		resolve: {
    		alias: {
        		'@': path.resolve(__dirname, 'resources/js/src/'),
        		'@themeConfig': path.resolve(__dirname, 'resources/js/theme.config.js'),
        		'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    		}
		}
	}); 

my app.scss file

	/*main pluging css*/
	@import 'bootstrap/dist/css/bootstrap.min.css';
	@import 'forms/theme-checkbox-radio.scss';
	@import 'perfect-scrollbar.css';
	@import 'main.scss';
	@import 'structure.scss';
	@import 'elements/alert.scss';
	@import 'forms/switches.scss';
	@import 'custom-loader.css';
	@import 'animate.css';
	
	@import 'tables/table-custom.scss';
	
	/*dark css*/
	@import 'dark.scss';
	
	/*custom css*/
	@import 'style.scss';
	
	

and my app.js file

	import './bootstrap';
	import { createApp, h } from 'vue';
	import { createInertiaApp, router } from '@inertiajs/vue3';
	import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
	import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
	import store from '@/store';
	// import { $themeConfig } from "theme.config";
	import "./src/assets/sass/app.scss";
	const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
	
	
	
	createInertiaApp({
		progress: {
    		color: '#4B5563',
},
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(store)
        .use(ZiggyVue, Ziggy)
        .mount(el);
},

})