How to use Botstrap / foundation-sites sass without slowing down vite HMR

[chmich]

see GitHub

Hi there,

whats the best way to include sass frameworks like bootstrap or zurb-foundation?

including theyr sass files in vite would slow down HMR aprox. 5 seconds (bootstrap) and 12 seconds (foundation).

i found a way for me.
but it works great.

I run Vite alongside the traditional asset pipeline.
So, i run all my Javascript and all custom stylesheets inside frontend folder which is handled by vite and that wunderful HMR.
I work basely with zurb foundation, only one project with bootstrap.

So, i included theyr stylesheets completely in the existing asset pipeline (for bootstrap by the gem bootstrap and for foundation by copying all stylesheets from the node folder and pasting it into app/assets/stylesheets. And there is also the file custom_settings.scss with the sass variables included for configuring the framework. And including the stylesheet_link_tag "application" into layout.

That all works fine together!

Vite HMR works super fast and bootstrap / foundation are working like known.

BR,
Christian