Disable caching of attached css/js libraries for custom module?

Question

I have been trying to disable caching during development so I followed drupals guide step by step: https://www.drupal.org/node/2598914

After doing this I would assume that the caching is completely disabled but when I am loading a js/css file for a specific module in mymodule/mymodule.libraries.yml I still have to clear all caches for me to see any updates.

How do you disable caching for attached libraries in custom modules?

test_module.routing.yml

test_module.test:
  path: '/test-me'
  defaults:
    _title: 'Testing module css cache'
    _controller: 'Drupal\test_module\Controller\TestController::test'
  requirements:
    _permission: 'TRUE'

test_module.libraries.yml

test:
  version: VERSION
  css:
    theme:
      test.css: {}

TestController.php

<?php

namespace Drupal\test_module\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Render\Markup;

class TestController extends ControllerBase
{
    public function test()
    {
        return [
            "#markup" => Markup::create("<div class='test-class'>Hello World</div>"),
            '#attached' => [
                'library' => ['test_module/test']
            ]
        ];
    }
}

test.css

.test-class {
    padding: 40px;
    background-color: blue;
}

If I change the background-color to red for example, and refresh the page (F5, Ctrl+F5, Ctrl+Shift+R, Right click refresh -> Clear cache and Hard Rest), it will not change to red until I clear all caches.

What piece am I missing to make this work? Or is it just not possible?

Note: It doesn't matter if I clear my browser cache at all (I currently have it disabled with devtools open)

Answer 1

You are on the wrong track. Caching of static assets (and CSS files are static assets when you disable CSS/JS aggregation) has nothing to do with Drupal's cache. Disable the caching of *.js and *.css files on your web server instead (e.g in .htaccess if you are using Apache).

Answer 2

You should simply remove the version: VERSION line, because this declares your library to be the same version as your Drupal core version, which does not change as often. By deleting this line, Drupal will add a default query string that changes after every cache rebuild/deployment, so it will naturally cache-bust.

See https://chromatichq.com/insights/drupal-libraries-version/ for more information on the VERSION value in libraries and why it shouldn't be used by anyone outside of core.

Answer 3

You can use the js_cache_buster module and add the enable_buster: true value to the js you want in your library.yml file. This will increment the ?v= value each time the cache is cleared.