How can I speed up compile times when hot-reloading SCSS?

sage
,
1

Hello,

Before I set off down the rabbit hole to figure out how to do this myself, I’m here to ask if anyone’s done it before.

I’m using Sage with the handy Bulma CSS framework and I have a very nice — thank you devs! — local workflow with hot-reloading of CSS and JS.

I would like to improve one thing about it, which is the time taken to recompile my SCSS. My main.scss file @imports some variables to configure bulma, the entire Bulma framework via autoload/_bulma.scss, then all my various components, overrides etc.

99% of the time I am changing code in my components, not things which would require me to recompile the whole Bulma framework. However, it’s recompiled along with everything else each time I save an .scss file. In an ideal world the hot-reloading would recompile my own code, but I could force a full recompile including Bulma if I restarted yarn.

I think one approach is to maintain two css bundles, one with the framework and one with all my own code. Does that sound reasonable? Has anyone tried this? Is there a better approach?

Thank you!

2

To compile these two things separately you’d need to be sure you weren’t using any Bulma @extends, @includes or $variables in your own scss (at which point what’s the use of a framework, right?). If any of those things are used in your styles, Sass will need the whole framework in order to compile your code correctly.

If you did manage to completely separate your scss from Bulma, you could then modify resources/config.json to create a second css file and enqueue it.

But this runs counter to the entire point of using a CSS framework and a compiler like Webpack.

3

Good point! I will see if I can speed it up some other way. Thanks.