Можно ли заставить Vite отслеживать и запускать компиляцию SCSS при изменении файла? ⇐ Javascript

[Anonymous]

Я новичок в Vite и использую его как часть репозитория SDK CMS. Он был предварительно настроен из репозитория.
Я хотел бы иметь возможность настроить его так, чтобы он (или что-то в этом роде) следил за компиляцией моих файлов SCSS при изменении и горячей перезагрузке браузера. Я могу скомпилировать SCSS с помощью команды, но было бы лучше не запускать его каждый раз, когда я меняю файл.
Ранее я делал это с помощью Gulp, но не смог выяснить, возможно ли это с Vite или нет. Я не хочу слишком сильно портить исходный репозиторий, добавляя новые пакеты, если можно этого избежать.
Я заработал горячую перезагрузку, обновив функцию reloadPlugin() ниже, чтобы включить файлы в мой каталог SCSS, так что, по крайней мере, браузер перезагружается, когда я обновляю файл SCSS.
Я пробовал вставлять различные методы из SASS API, но ни один из них не оказался тем, что мне нужно.
Кто-нибудь знает, возможно ли вообще настроить Vite для просмотра файлов SCSS и запуска компиляции?
Мой файл vite.config.js выглядит следующим образом:
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'
}
}
}
};
});


Подробнее здесь: https://stackoverflow.com/questions/798 ... ile-change