[Vite] Sass is incredibly slow? CPU profile attached.

[halljus]

One of our apps uses Bootstrap and we customize some of their Sass variables. When importing our .scss file with the customizations (which then also loads Bootstrap's styles), both the initial load and subsequent hydration are super slow (like 7s to load, 3s to hydrate). If we skip the customization by importing Bootstrap's CSS directly, it speeds the whole thing up roughly 10x. Is anyone aware of anything that can be done to improve the speed here? Is it something Remix can address at the plugin level?

I've included a CPU profile captured via vite --profile that you can view at https://www.speedscope.app. I'm no flame chart expert, but it looks like sass.dart.js certainly contributes to the slowness, which matches the results of our troubleshooting.

vite-profile-real-app.cpuprofile

[sergiodxa]

Since Remix doesn’t support SASS out of the box it means you added another plugin to Vite, right? Then I recommend you to open an issue on the repo of that plugin.

[halljus]

No additional plugins, Vite supports Sass out of the box.

[sergiodxa]

Then open an issue on Vite repo

[bigyandulal2]

x Build failed in 608ms
error during build:
SyntaxError: [vite-plugin-sass] Unexpected token u in JSON at position 0
file: C:/Users/Bigyan/Desktop/scratch/cart/src/sass/main/main.scss
at JSON.parse ()
at Object.transformReducer (file:///C:/Users/Bigyan/Desktop/scratch/cart/node_modules/rollup/dist/es/shared/node-entry.js:18662:81)
at file:///C:/Users/Bigyan/Desktop/scratch/cart/node_modules/rollup/dist/es/shared/node-entry.js:19712:140
at async transform (file:///C:/Users/Bigyan/Desktop/scratch/cart/node_modules/rollup/dist/es/shared/node-entry.js:18680:16)
at async ModuleLoader.addModuleSource (file:///C:/Users/Bigyan/Desktop/scratch/cart/node_modules/rollup/dist/es/shared/node-entry.js:18896:36) how to solve this error in my vite react project i did everything right .. even my local server is running with o warning and vulnerabilities but when i try it to predeploy to live server it is rendering this error , how can i fix this ?

[sergiodxa]

As mentioned in another answer, Remix itself doesn't have SASS support, so this is responsibility of Vite or another plugin in charge to processing SASS.