Unique cache busting settings per asset file

Looking to create a supplementary css file that does not have any cache busting (so it can be linked to externally), while maintaining cache busting on main.css. Any tips or pointers on how to do this?

Right now this is the current configuration:

Looks like ExtractTextPlugin’s filename takes a string or a function. You probably could chuck a conditional in there to test for a specific filename. You would need to have a second stylesheet that’d be identical to main.scss or perhaps even import main.scss.

If you duplicate the ExtractTextPlugin and change the filename to just be the chunk name, you’ll get a cache busted version and a non-cache busted version of each stylesheet:

    new ExtractTextPlugin({
      filename: `styles/[name].css`,
      allChunks: true,
      disable: (config.enabled.watcher),
    new ExtractTextPlugin({
      filename: `styles/${assetsFilenames}.css`,
      allChunks: true,
      disable: (config.enabled.watcher),

It is important that the non-cache busted one is first since dist/assets.json — which is used by Sage for enqueuing assets — will only receive one entry for the asset. The second one seems to write over the first.

For example, dist/assets.json:

  "scripts/customizer.js": "scripts/customizer_bd6453a9.js",
  "styles/main.css": "styles/main_bd6453a9.css",
  "scripts/main.js": "scripts/main_bd6453a9.js"

Actual folder structure:

├── scripts
│  ├── customizer_bd6453a9.js
│  └── main_bd6453a9.js
├── styles
│  ├── main.css
│  └── main_bd6453a9.css
└── assets.json

Perfect, that’s exactly what I was looking for. Thanks!

1 Like

Cheers. This works well.

It would be nice if there was a simpler way to add files that shouldn’t be cache-busted or minified.

For example, I’m trying to serve a fonts.css file to an external provider (they can utilise my client’s fonts on their third-party ticketing system). It would be ideal if this file wasn’t cache-busted or minified.

Maybe a new folder where these kinds of assets can be placed?

If you were using PostCSS instead of Sass, you could just have them reference the source file: resources/assets/styles/common/fonts.css (or whatever your filepath looks like). Or you could swap the file extension for that one file and just have Sass import it.

1 Like