Cached CSS Problem

[efeerdogru]

Hi all,

Browser cache is a problem. When I change things, I had to CTRL+F5 everytime.

I'm currently playing with Svelte and Sapper. Generally, generated css file is stored in static folder. That's fine. I don't like a framework to handle css files.

But, in that html, that line causes browser to cache:

<link rel="stylesheet" href="global.css" />

It would be nice when I build css, a version will be added. So that, browser will load new styles.

To achieve this, I wrote a little script. I fits my needs. But I don't know if it's ideal or not, or is there another way to do that.

//
// update-template.js
//

const fs = require("fs");

const templateFile = "./src/template.html";
const controlFile = "./static/global.css";

const version = fs.statSync(controlFile).mtimeMs;
const replacement = `href="global.css?v=${version}"`;

const searchRegex = /href=\"global\.css.*\"/g;

const htmlTemplate = fs
  .readFileSync(templateFile, "utf-8")
  .replace(searchRegex, replacement);

fs.writeFileSync(templateFile, htmlTemplate, {
  encoding: "utf-8"
});

And I modified script with this:

"scripts": {
  "build:tailwind": "tailwindcss build static/tailwind.css -o static/global.css && node update-template.js",
}

After executing, template changed:

<link rel="stylesheet" href="global.css?v=1604690783376.451" />

Wanted to share.
Thanks.