nuxt: Slow nuxt startup when importing sass file

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.

Really appreciate your time diving into this. Thank you.

Contribution to this topic; If you are using tailwindcss in your project make sure your tailwind.config.js has set up correctly.

if your content looks like this; content: ['./**/*.{html,js,vue}']

It scans the entire project which takes too much time to warm up. Change it so only includes required folder;

content: [ "./components/**/*.{html,js,vue}", "./pages/**/*.{html,js,vue}" ]

Is this problem really solved? I still facing this issue with version 3.0.0

Vite client warmed up in 43303ms Nitro built in 3393 ms

If I remove /assets/main.scss from nuxt.config.ts, the startup time goes down to just two seconds. Is this normal?

Here is the link to stackblitz using nuxt 3.0.0 https://stackblitz.com/edit/nuxt-starter-edue27?file=nuxt.config.ts