whoami
whoami

There's much to like about OctoberCMS, but there's one thing that bugs me quite a bit: compiling and caching a theme's CSS files.

My setup: I run OctoberCMS in a Docker container (with the theme accessible on a Docker Volume) and edit my code with Visual Studio Code. I use the Live Sass Compiler extension on Visual Studio Code to compile the SCSS files. I set my theme to include the already compiled CSS file (and not the SCSS file). However, my edits are not visible in the front end (while they do show up in the CSS files compiled by Visual Studio Code's extension). Running php artisan cache:clear in the Docker container has no effect: the edits will still not come through.

I am aware that OctoberCMS can do its own SASS compiling. But while I am developing a theme I prefer OctoberCMS to not handle any of this: no compiling, no caching, no combining. I would like OctoberCMS to simply include the compiled CSS files as they reside on the Docker Volume. Is there any way to accomplish this? Am I missing something?

mjauvin
mjauvin

how do you include the css files in your theme?

mjauvin
mjauvin

The files are most likely cached by your browser... you may want to add a version at the end of the css file url, like:

<link href="/path-to-css?v=1.0. 1"... />

And increment this when the file changes

mjauvin
mjauvin

Or better yet, add a timestamp to the url:

<link href="{{ '/path-to-css?v=' ~ 'now'|date('U') }}" ... />
whoami
whoami

Thanks for your suggestions. I'm not sure if this was caused by browser caching, but you've put me on track to further investigate some strange browser behaviour. Will report back.

whoami
whoami

I am happy to report that my issue has been solved. It all makes sense to me now. It was due to a combination of a number of factors (which makes troubleshooting always a little tricky). In the next few comments I'll illustrate what was at play just in case this can be helpful to others.

Please note that I am using Twig to include the CSS files (not the OctoberCMS {% styles %} tag, or the $this->addCss function).

whoami
whoami

First issue: OctoberCMS combining CSS files.

My code had the following:

<link href="{{ [
  'assets/css/style.css'
  ]|theme }}" rel="stylesheet">

which resulted in OctoberCMS producing a combined CSS file:

<link href="http://dev.example.com/combine/460aeea19834284ad170f5bca66e117a-1597290448" rel="stylesheet">

This makes sense because an array is being passed. While in this case the array only contains one element it still is an array. So changing this to:

<link href="{{ 'assets/css/style.css'|theme }}" rel="stylesheet">

results in:

<link href="http://dev.example.com/themes/name_of_theme/assets/css/style.css" rel="stylesheet">
whoami
whoami

Second issue: location of generated CSS files

I forgot to tell the Live Sass Compiler extension to spit out the generated CSS file to a specific directory. Not doing so will result in the generated file ending up in the directory in which the SCSS files reside. So I had to add the instructions for this in the .vscode/settings.json file (located in the root directory of the project -- which is the theme I'm working on). The generated files are now correctly placed in the assets/css directory.

whoami
whoami

Third issue: browser caching

As mjauvin pointed out, the best way to link the generated CSS file would be to prevent browser caching altogether. But mjauvin's suggestion did not work for me due to what looked to me like an incorrect positioning of the "theme filter" (|theme). So I now call my stylesheet with:

<link href="{{ 'assets/css/style.css?v='|theme ~ 'now'|date('U') }}" rel="stylesheet">

and that results in:

<link href="http://dev.example.com/themes/name_of_theme/assets/css/style.css?v=1598056263" rel="stylesheet">

Last updated

whoami
whoami

Fourth issue: sleep!

I was trying to troubleshoot this issue right before going to sleep (and not having slept much the night before). It's a good reminder that sleep is important as it affects our ability to think clearly. Happy to have posted this issue as mjauvin pointing me in the right direction really helped me to take a systematic approach to troubleshooting the issue (thanks again, mjauvin). Taking one step at the time instead of throwing my hands in the air wondering why all the "magical voodoo" in the background is not delivering the expected result. I now actually understand it all and why it wasn't working before.

Last but not least: I am glad that the failing was my brain and not the great OctoberCMS.

Thanks for reading and happy coding y'all!

Last updated

1-10 of 10