5 minute SASS compile times

[treadway]

With the Comet starter site, I am using the styles.scss for site wide overrides, general and custom styles. I have 23 custom components that @use the sales.scss (so far).

Compiling after saving the styles.scss takes 5 minutes.
Compiling a custom component's scss after a save takes around 30 seconds.

Is there something I can do to speed this up? This seems quite ridiculously long.
I am on an M2 Ultra, so I do not believe it is my system.

Pretty please help.

[jbouder]

I just did a test using my M1, and these are the numbers I'm seeing:

• styles.scss: 6 - 7 seconds to recompile
• some-component.scss: immediate

...so not seeing on my end the same results. Any chance I might be able to see your repo somewhere?

If not, I'd be curious if you're seeing the same results if you do a fresh clone of the app with no major customizations.

[treadway]

OK I started a fresh app from repo.
I was getting 10 seconds on small change to styles.scss
then 12 on all my changes to styles.scss
then added some stripped down components and the styles.scss compile time went to 22 seconds.
you can see ho this could add up.

here is the repo with the test
https://github.com/treadway/test-comet

thank you for your help!!!

[jbouder]

Thanks for the info. I'll take a look and will do some digging.

[jbouder]

Ok, I think I figured it out. Adding these @use statements to import the base styles.scss file definitely are what are causing the extra compile time: https://github.com/treadway/test-comet/blob/fce5e3892f8bac977b645c471f0a68c94443845c/src/sections/BasicBanner/BasicBanner.scss#L1. I'm not 100% sure what the issue is, but it appears to be some cyclic issue with how you're importing the base scss file, which in itself is loading all of USWDS (which is a lot).

To get around this issue, you can create a separate scss file to expose your variables, then import that into your components scss. Here is the general idea: MetroStar/comet-starter@main...scss-testing.

Based on my testing, I was able to take the recompile down from about 45 seconds (for 5 new components) down to 7 seconds (as before).

Another option is to just put all of your SCSS in the styles.scss, which since you are not using scoped scss modules, might not be a bad idea.

Let me know how that works or if you have any question.