Is it possible to get Vite to watch and trigger SCSS compile on file change?

I am new to Vite and am using it as part of a CMS's SDK repo. It came pre-configured from the repo.

I'd like to be able to configure it so that it (or something) watches my SCSS files compiles on change, hot reloading the browser. I can compile SCSS with a command, but it would be better to not have to run it each time I change a file.

I've previously done this with Gulp, but have had trouble finding out if this is possible with Vite or not. I don't want to mess with the original repo too much by adding new packages if I can avoid it.

I did get the hot reload working by updating the reloadPlugin() function below, to include files in my SCSS directory, so at least the browser reloads when I update a SCSS file.

I've tried inserting various methods from the SASS API, but none seem to be what I need.

Would anyone know if it is at all possible to configure Vite to watch the SCSS files and run a compile?

My vite.config.js file appears as such:

function reloadPlugin() {
  return {
    name: 'reload-plugin',
    handleHotUpdate({ file, server }) {
      if (file.includes('/proj/')) {
        server.ws.send({ type: 'full-reload' });
        return [];
      }
    }
  };
}

export default defineConfig(() => {
  return {
    publicDir: 'public',
    build: {
      rollupOptions: {
        input: {
          server: './src/entry-server.js',
          main: './src/scripts/main.js'
        },
        output: {
          dir: './dist',
          entryFileNames: '[name].js',
          assetFileNames: '[name][extname]'
        },
        external: ['glob']
      },
      outDir: 'dist',
      emptyOutDir: false
    },
    resolve: {
      alias: {
        '@global_components': path.resolve(
          __dirname,
          './src/global_components'
        ),
        '@styles': path.resolve(__dirname, './src/styles'),
        '@images': path.resolve(__dirname, './src/images')
      }
    },
    server: {
      open: true,
      port: 4000,
      proxy: {
        '/proj': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/proj/, '/r/')
        }
      }
    },
    plugins: [
      reloadPlugin(),
      viteGlobImport(),
      viteStaticCopy({
        targets: [
          {
            src: 'src/images/**/*',
            dest: 'images'
          }
        ]
      })
    ],
    esbuild: {
      supported: {
        'top-level-await': true
      }
    },
    css: {
      extract: true,
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler'
        }
      }
    }
  };
});