Vite - sass

Vite (French word for "quick", pronounced /vit/, like "veet")

When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project root.

package.json 

{
  "name": "bangtech",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --config vite-dev.config.js",
    "build-dev": "vite build --config vite-dev.config.js",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "sass": "^1.57.1",
    "vite": "^4.0.0"
  }
}

vite-dev.config.js 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "/src"),
        "~@": path.resolve(__dirname, "/src"),
      },
    },
	css: {
	  preprocessorOptions: {
		scss: {
 		  quietDeps: true,
		  additionalData: `@import "/src/styles/_variables.scss";`
		}
	  }
	},		
    build: {
		outDir: 'dist_dev',
		minify: false,
		assetsDir: 'assets',
		
        rollupOptions: {
            output: {
                entryFileNames: 'plugin.js',
                assetFileNames: 'styles.css',
                chunkFileNames: "chunk.js",
                manualChunks: undefined,
            }
        }
    }
})

Configuring Vite