sass compile perf speed up

[hirokith]

I've tried vite.js with my existing web project and find that sass compile speed could be the bottleneck for the total duration. In my project there are dozens of sass files required by react components, the total initial page load time is around 10 seconds, and I've dig into the source code and add profile logs and find that sass compile time consumed up to 7s+, which slowed down the total duration dramatically. I'm wondering if there's any solution to speed up sass compile.

I've turned to sass's doc and found that vite.js is using async mode render, which is much slower that sync mode. I've read the code and figured that it should be the importer implement has to be async to be compatible with alias resolve , so the renderSync call is unavailable. Is there any possibility that the code could be transformed to sync mode?

Besides, the Embedded Sass has just released and it should have better native performance than dart-sass base on JavaScript version, and "Note that sass-embedded is a bit faster in asynchronous mode than it is in synchronous mode (whereas the sass package was faster in synchronous mode)", however the bad news is that render and renderSync are deprecated APIs and did not get full support. So maybe vite.js could provide support for customized sass compiler choice?

In conclusion, the issues I'm concerning about:

1. maybe sass compile could switch from legacy render/renderSync to latest compile/compileSync for better compatibility?
2. maybe sass compiler could be customized or configured, so that embedded-sass could be an opt-in option?

• relevant issue: Option to use the DartVM executable rather than the pure-js version of dart-sass. webpack-contrib/sass-loader#774 (comment)

[pavlexander]

Have you figured how to seed up sass?

I am using a bootstrap from sources and it uses lot's of includes internally. In the end all the benefits of Vite are gone when dealing with SASS. I have managed to speed up the debugging a bit by setting the css.devSourcemap: false (had it set to true), however it seems like after you change any part of css in vue component it slows things down again for some time.

[hirokith]

Still nope...

[miterfrants]

I got a workaround solution, use node-sass instead of dart sass

• update
  https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L1216
  to

    const resolved = require.resolve(lang === 'sass' ? 'node-sass' : lang, { paths: [root, ...fallbackPaths] })

• install node-sass in your project

it work fine for me

[hirokith]

This might work for the moment however node-sass is marked deprecated and won't support newer sass grammars/features, and Embedded Sass is the new suggested option. Anyway, this still relies on my issue 2: sass compiler could be customized or configured, otherwise it's necessary to modify vite's source code just as your suggestion.

[pepa-linha]

I solved this problem quite simply.
Do not load any "main.sass" file on DEV, where dozens of imports.

I have made the convention that I only use lines with "@import" in the main.sass file. I then parse this file and print a lot of lines from this file in HTML.

So instead one line

<link rel="stylesheet" href="src/styles/main.sass">

I load

<link rel="stylesheet" href="src/styles/components/MyComponent1.sass">
<link rel="stylesheet" href="src/styles/components/MyComponent2.sass">
...
<link rel="stylesheet" href="src/styles/components/MyComponentN.sass">

and if I change a file, not all styles are compiled. And it's supafast.

[chmich]

Hi There,

found a way on Rails!
but it works great.
In Rails its possible to run Vite alongside the traditional asset pipeline which has a sass compiler.
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.
including theyr sass files in vite would slow down HMR aprox. 5 seconds (bootstrap) and 12 seconds (foundation).

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.

If you are not on Rails like me you could place all the sass stuff from the frameworks together with the custom_settings file with the sass variables and compile it manually like described on theyr website. This step has just to repeated if you change a sass variable which should be rarely the case.

BR,
Christian

[mathieucivel]

Using @dickeylth investigation, I managed to use embedded sass, without forking vite, by installing it as an alias:

npm install --save-dev sass@npm:sass-embedded
yarn add --dev sass@npm:sass-embedded

Load time was divided by two, but it's still quite slow versus native CSS..

[sknep]

This solution works great for my project locally on Mac but doesn't play well with Linux in Docker (either alpine or buster images)... I get an EPIPE error at /app/node_modules/sass/dist/lib/src/packet-transformer.js:66:18. No solution yet.

[TsepoDelta]

This solution worked! If you are struggling with imports, this article was great in assisting with the move to the new Sass Module System:

https://stefaniefluin.medium.com/the-new-sass-module-system-out-with-import-in-with-use-e1bd8ba032d0

[pilishen]

@TsepoDelta unfortunately Bootstrap cannot or won't change imports with @use

[TsepoDelta]

Yes, I noticed 😔