Slow nuxt startup when importing sass file

Environment

• Operating System: Linux
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.1
• Package Manager: npm@8.3.1
• Builder: vite
• User Config: css
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-cimcyj

Describe the bug

I am using Bulma CSS with Nuxt app.

When I @import 'node_modules/bulma/bulma.sass'; in my '@/assets/main.scss' file. the nuxt startup becomes too slow. It takes around 20-60 seconds for vite client and server to warm up.

Currently I have app running with nuxt3@3.0.0-27460489.53fbca7 without this issue.

Additional context

No response

Logs

No response

[dulnan]

tl;dr Replace custom divide function with math.div.

After some longer profiling and debugging I think I found out the actual reason for very slow warm ups and builds (mine took anywhere from 20 seconds to 2 minutes). At least in my case it reduced the build time significantly.

Both Bulma and Bootstrap have a magic divide function that reimplements… dividing numbers. Originally this was implemented in Bootstrap and Bulma copied that code from there, but Bootstrap has since then “updated” the function to be more “efficient”:

https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss#L262

Here’s Bulma’s code (based on an older version from Bootstrap): https://github.com/jgthms/bulma/blob/master/sass/utilities/functions.sass#L118

The main issue seems to be a while loop, looping itself into oblivion. After replacing it with math.div() from sass:math, the warm up time dropped down to 4 seconds from 22 seconds. I have also tried the improved version from Bootstrap, which reduced the same build time to 16 seconds.

Now calling this function just a few dozen times in the beginning might not be an issue, but if you have dozens of SCSS files, components with styles and you’re using additionalData to provide global variables, you’ll end up running that inefficient code hundreds of times. Which adds up to a lot, hence why builds take ages.

[issue-up[bot]]

Upstream issue created:

• https://github.com/vitejs/vite/issues/11221