#frontend #sass #scss #vite #webpack

Ускорение компиляции Sass в Vite и Webpack

Vite поставляется со встроенной поддержкой Sass, а также других CSS-препроцессоров. Просто установите npm sass, импортируйте файл .scss, и он заработает.

Однако в этом была своя загвоздка. При каждом импорте Sass новый экземпляр Sass запускается, компилируется и завершается. Если у вас есть один импортированный файл точки входа Sass, импортирующий другие файлы Sass, это не так уж и важно. Но если используется однофайловый компонент(SFC) Vue с lang="scss", то для каждого SFC создавался новый экземпляр Sass.

Это может привести к большим потерям времени.

В начале этого года OddBird помог Sass добавить новый Compiler API, позволяющий повторно использовать один экземпляр Sass для нескольких компиляций. Хотя можно использовать новый API в собственных настройках компиляции Sass, было приятно увидеть, что команда Vite добавила его поддержку в версии 5.4.0.

📄 Читать статью

@dev_notes_ru