I've been working on a new theme in which I cloned the boost theme and renamed the needed lines of code and files and was soon ready to start customizing. I haven't really used SASS that much as I'm quite content using plain ol css so I decided to try and commit to using SASS as Moodle seems to be pushing this.....I think?. As soon as you turn on the designer mode SASS recompile's everytime taking 2+ minutes all to end up timing out, due to php timing out, followed by a few more refreshes. I then turned it off and tried purging caches via CLI and it's the same result of waiting for a few minutes just to get a page with no CSS at all, exactly like the image you posted.
I'm sorry but this is horribly inefficient when it comes to making theme changes. If I make one little css change in my sass file I then have to wait a few minutes only to refresh again, wait another 30 seconds and refresh one more time. I spent a few hours just trying to change a couple things and decided to quit using sass.
Perhaps I'm missing something to speed this process up??
I cannot have this on production. There are times when I have to purge caches as other mods/blocks/plugins have javascript or css changes. And on the occasional time something just weird is happening and caches need to be purged mid day (don't like to do this but sometimes it has to be done). If this happens on production then thousands of students are gonna hit a page with no css and we'll get a flood of emails and tickets complaining moodle is broken. Only cause SASS is taking it's sweet time recompiling.
Again, maybe I'm missing something to speed this process up??
HOW TO FIX: So my work around was to simply grab the all.css file in your moodle data directory:
moodle_data/localcache/theme/[some number here]/[name of your theme]/css/all.css
and stick that in the style folder:
theme/[your theme]/style/all.css
Remove all references to scss in the theme/[your theme]/config.php and now add all.css to your sheets array.
$THEME->sheets = array('all')
// $THEME->scss = function($theme) {
// return theme_uleth_get_main_scss_content($theme);
// };
// $THEME->csstreepostprocessor = 'theme_uleth_css_tree_post_processor';
etc.....
At least this way while scss is disabled you can quickly make theme changes and be able purge caches and see the results almost instantly.
Perhaps if you really want to turn scss back on once your done styling you can reverse the process above and include your new changes in either a sass file or add it to the $THEME->sheets array.
HTH.