1

Background

I am developing a custom theme for my Drupal 10 site. I found myself constantly flushing the cache, so I have been looking up ways to disable the cache on my local dev site. My end goal is to be able to simply refresh the page to see CSS changes. I need this in order to enable live reload at a later step.

Problem

I am having extreme difficulty disabling the cache, despite reading multiple Drupal docs and q/a's on stack overflow and stack exchange.

Attempts

I tried many attempts outlined below over the past day and a half and each attempt failed. I also restarted Apache service after each attempt.

Attempt 1

I found this Drupal doc and tried the steps:

  1. I disabled caching on the Admin interface. This included going to Admin -> Configuration -> Development -> Development Settings and toggling all of the options to on.
  2. When this didn't work, I went to Admin -> Configuration -> Performance and changed Caching to <no cache>.

Attempt 2

I tried the solutions in the question mine was closed as a duplicate of. This question said this was due to Apache caching static files but didn't explain how to fix this. I found this second question that explained how to modify the .htaccess file to disable caching. I added the below config to my .htaccess file in my root directory:

<IfModule mod_rewrite.c>
  RewriteEngine on
  <FilesMatch "\.(html|htm|js|css)$">
    FileETag None
    <IfModule mod_headers.c>
      Header unset ETag
      Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
      Header set Pragma "no-cache"
      Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
    </IfModule>
  </FilesMatch>
</IfModule>
  • Made sure that my httpd.conf is loading mod_rewrite
  • Added EnableSendfile off to httpd.conf

Attempt 3

I tried the other answer on the question used to close mine which recommended to remove version: VERSION from the info.yml file. I also read through the posted blog. I tried removing the line as it recommended but this did not work.

I read through the string of q/a's and blogs which suggested removing VERSION from the libraries.yml file which also didn't work.

Attempt 4

As per a comment on my first question, I added $settings['deployment_identifier'] = 'A1234'; to my settings.php file.

Attempt 5

I followed the steps here created a settings.local.php file. I added the below:

$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['page'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Conclusion

After all of these failed attempts, I don't understand what I am missing and I really want to learn how to fix this. I am open to any possible solutions or things I haven't tried.

Additional Info

I previously posted this question but it was closed as a duplicate and linked to a solution that doesn't even fix my issue which is pretty frustrating. Seeing that it wasn't reviewed and reopened, I decided to submit a new question with much more detail so that hopefully this one isn't simply closed.

  • This is in a local development environment on my computer not an external host
  • I am not using the color module which is known to cause similar issues
  • Stack Exchange suggested this similar answer, but it also didn't help
Improve this question
4
  • What tool are you using for your local dev? Lando, DDEV, Docker Compose, XAMPP ???
    – No Sssweat
    Sep 15 at 5:33
  • For testing purposes, you could try uninstalling "Internal Dynamic Page Cache" and "Internal Page Cache" and if it's still cached then something is up with your environment.
    – No Sssweat
    Sep 15 at 5:42
  • Maybe it's your browser?
    – No Sssweat
    Sep 15 at 5:54
  • I configured Apache with virtual hosts to serve the web folder, but I don't use any other tool to run the site. I have also tested this on Chrome, FF and Edge with the same problem. I'm also going to try these testing steps.
    – GeorgeCiesinski
    Sep 15 at 15:25

2 Answers 2

Reset to default
1

It's definitely the browser as commented by @No Sssweat. Clearing the browser cache should load a new version of static CSS files. Also putting the browser in dev mode or configuring the webserver to send headers not to cache the files.

This is only Drupal-specific because Drupal is adding a query string to CSS files so they can be invalidated on code updates or a full cache clear:

<HTML ...>
  <head>
    <link rel="stylesheet" href="/core/.../align.module.css?xyz123" />
    ...

See CssCollectionRenderer::render

However, you should be able to use this for your custom theme as well, when Drupal render caching is already disabled and you are building a new page HTML structure on each request anyway. Generate a new cache-busting query string for each page:

mytheme.theme

function mytheme_preprocess_page(&$variables) {
  $cache_settings = \Drupal::service('settings')->get('cache', []);
  if (isset($cache_settings['bins']['render']) && $cache_settings['bins']['render'] == 'cache.backend.null') {
    _drupal_flush_css_js();
  }
}

I've included a check for the local dev settings (Attempt 5). For two reasons, (a) it needs these settings to work properly and (b) it shouldn't run in a production environment.

This is not a solution for everyone. Web designers have tools to live edit CSS files. They are, as explained at the beginning, just files.

Improve this answer
1
  • Thanks for your suggestion. I tried this, but unfortunately it still didn't work for me. I also tried multiple browsers so I don't think it was browser issue, however I did manage to resolve this issue. I posted my solution.
    – GeorgeCiesinski
    Sep 21 at 15:37
0

For some reason, the isolated fixes didn't work for me. After many more attempts, I was finally able to find a solution that works for me, and it turned out to be a combination of most of my attempts.

  1. Go to settings.local.php and uncomment the following. Make sure the first two options are set to false:
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['page'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Note: If this file doesn't exist, you copy & paste example.settings.local.php from web/sites into web/sites/default and rename it to settings.local.php. Once this is done, you can make the above stated changes.

  1. In your settings.php file, uncomment the section:
if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

Otherwise the settings.local.php file will not be seen or used.

  1. Go to your site and navigate to the Admin Toolbar -> Configuration -> Development -> Performance. Ensure that Aggregate CSS files and Aggregate JavaScript files are both disabled.

Note: I am not sure why this was needed though. For me, this did not work until I disabled these and cleared the cache manually.

  1. Add the following to your /web/.htaccess file:
<IfModule mod_rewrite.c>
  RewriteEngine on
  <FilesMatch "\.(html|htm|js|css)$">
    FileETag None
    <IfModule mod_headers.c>
      Header unset ETag
      Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
      Header set Pragma "no-cache"
      Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
    </IfModule>
  </FilesMatch>
</IfModule>

I tested removing this and it broke the refresh, so it appears that this is needed at least in Drupal 10.1.3.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.