CSS & Template caches not rebuilding correctly after flushing

Hello,

we have built a TYPO3 site for a client (first T3 site ever) and have been facing some caching issues since launch.
The site is running on version 12.4.10 in a composer-based PHP 8.1.22 environment.

The issue we’re having is that template changes or CSS changes are not visible in the frontend, even after clearing the cache multiple times. We tried flushing the cache via the TYPO3 backend, tried deleting multiple directories storing cached files.

Directories manually deleted were:

  • /var/cache
  • /public/_assets
  • /public/typo3temp/assets

Detailed information about our issues:

Issue 1)
Changed the template of a form (default form extension) in EXT:extname/Resources/Private/Partials/Form/Page.html. Uploaded the changed template via FTP (no pipeline yet) to the server. But after clearing all caches multiple times, the changes were still not visible.

Issue 2)
We compile our SCSS styles into a single main.css which is included via TypoScript using includeCSS. That works fine. At some point we wanted to push a little CSS fix for something and uploaded the new main.css to the server. You’d think that TYPO3 would pick up the changes - but nope. Flushing caches did not help.
I identified the cached CSS file and straight up pasted the changes into that, which worked. But now it broke again and the few new lines of CSS are not cached anymore.
It almost feels like there is a second, old main.css which is being cached and the actual file is not considered.

We developed this site locally using Docker, where that issue once occurred too. Restarting the container fixed the caching issue. We haven’t tried restarting the production server yet.

We have that site deployed to a testing server as well, where the problem occurs too. So maybe there is something misconfigured? The environment does not seem to be the reason.

Has there ever been an issue like this before? Does anyone know what the problem is?

I’d be happy to provide more information if it helps debug the issue.

Hi J D!

Welcome to TYPO3!

Given that restarting the Docker container seems to fix the issue, it sounds like this could be due to some caching in the environment (like a memcache or the browser cache), rather than within TYPO3.

However, clearing the cache is usually a necessary step in order to make sure changes to files become visible. For optimization reasons, but depending on your configuration, TYPO3 often merges CSS and JavaScript into one or more cached files, and those will need a cache-clear to be updated.

To make sure we’re on the same page, please try clicking the Flush cache button in the Admin Tools > Maintenance module or by running the clear cache command in the CLI (vendor/bin/typo3 cache:flush). This should clear every cache in TYPO3 and would normally fix the kind of problem you’re experiencing.

Please let me know how this worked and feel free to ask further questions!

— Mathias

Hi,

I’ve already, several times in fact, cleared the cache the way you described it. But that didn’t seem to have any effect in my case. Although there weren’t any errors popping up and the caches seemed to be cleared correctly, the system just doesn’t recognize the changes I have made in the CSS and templates, respectively.

For simplicity, let’s say in my main.css file that gets loaded via TypoScript, I have added a new class .test. When I go view or edit the merged CSS files after clearing the cache, my .test class is not in the merged CSS, but still in the source main.css file.

It feels like the system caches some other arbitrary files, but not the actual source files I edited.

Hi!

Try disabling TYPO3’s CSS file concatenation. That will allow you to debug this with the original file.

You can disable concatenation of CSS files by setting config.concatenateCss = 0 at the end of your TypoScript template. You may also want to set config.compressCss = 0 to make sure the file is not compressed and modified by TYPO3 in that way. (More info about concatenateCss in the documentation.)

Make sure that the correct file is included in the HTML of the page and that it is successfully loaded by the browser.

Does this work for you?

— Mathias