This ViteJS plugin will make sure compiled CSS files will have the same path structure as JS files which allows you to retain the same input path structure as output path

vite-js-retain-css-file-path.js

import path from 'path'

export default (cssBundleNameIndex = []) => ({

	/**
	 * @see https://rollupjs.org/guide/en/#renderchunk
	 */
	renderChunk(code, chunkInfo) {
		const {
			fileName:     jsFileName,
			viteMetadata: { importedCss }
		} = chunkInfo;
		const hasCssFile = importedCss.size === 1;
		if ( hasCssFile ) {
			const originName = importedCss.values().next().value;
			const newName = originName.replace( 'assets/', path.parse( jsFileName ).dir + '/' );
			cssBundleNameIndex[originName] = newName;
			importedCss.delete( originName );
			importedCss.add( newName );
		}
	},

	/**
	 * @see https://rollupjs.org/guide/en/#generatebundle
	 */
	generateBundle(options, bundle) {
		Object.entries( bundle ).forEach( ([originName, moduleInfo]) => {
			const isCssBundle = originName.endsWith( '.css' );
			const isInBundleIndex = originName in cssBundleNameIndex
			moduleInfo.fileName = isCssBundle && isInBundleIndex
				? cssBundleNameIndex[originName]
				: moduleInfo.fileName
		} );
	},
})