Debugging SCSS
Introduction
You’re customising your Moodle site using CSS / SCSS, perhaps with a plugin or in theme, then suddenly your changes disappear! For example you want to go further than just using the user interface (see www.elearningworld.org/a-little-boost), so you edit a file and oh no, no more custom font!
What do you do now?
Disclaimers
Names / logos can be trademarks of their respective owners. Please review their website for details. I am independent from the organisations mentioned and am in no way writing for or endorsed by them. The information presented in this article is written according to my own understanding, there could be inaccuracies, so please do undertake your own research. The featured image is my copyright, please don’t use without my permission.
Fear not
What’s happened is that the SCSS parser (docs.moodle.org/dev/SCSS) has failed to compile your changes for some reason. Luckily the parser will report the error in the ‘PHP error log’. The location of this file can be set by the PHP runtime configuration setting ‘error_log’, www.php.net/manual/en/errorfunc.configuration.php#ini.error-log, but for me it wasn’t set:
So a search on the web indicated the web servers log, and in there ‘/var/log/apache2/error.log’ we find the message we want:
Which allows us to know the file and line number that’s causing the issue:
In this case, line 129 is the end of the ‘_type.scss’ file because the parser thinks that a nested selector block hasn’t been closed – indentation enforcement is not a part of the syntax.
Conclusion
I hope you find this little snippet of information useful.
- Subsections – 16th January 2025
- NAS – 16th December 2024
- Debugging SCSS – 16th November 2024
