MooseDog Studios

Here in Vermont, Convention Takes A Back Seat To Quality

MooseDog Studios Autumn Hero Picture

Fast and Easy CSS Revisioning

Published: Jun 3, 2023
Updated: Apr 19, 2024

There's lots of information available out there on this subject, as it's been a long-standing concern, but fortunately for you, the process of versioning a proper browser cache-busting CSS file in Eleventy has boiled down to just a few lines of code. Let's start with some installation:

npm install eleventy-sass --save-dev
npm install eleventy-plugin-rev --save-dev

These two plugins were created by one very talented person, and can be found on Github if you're looking for some more documentation.

Eleventy-Sass and Eleventy Plugin Rev

On To The Show

Up next is configuring them to work in your .eleventy.js file, as such:

const pluginRev = require("eleventy-plugin-rev");
const eleventySass = require("eleventy-sass");

module.exports = function(eleventyConfig) {

  // revision the css filename

  // let eleventy handle compiling sass
  eleventyConfig.addPlugin(eleventySass, {
    compileOptions: {
      permalink: function(contents, inputPath) {
        // ignore the critical scss files
        // or others you don't wish to be treated here
        let parsed = path.parse(inputPath);
        if ('critical')) {
          return false
        // directory instructions, changes your input directory (/sass/) to your output directory (/css/) and adds the file extension
        return (data) =>^\/sass\//, "/css/") + ".css";
    sass: {
      style: "compressed"
    rev: true

And in your 'head' element, a very recognizable link tag. Note the presence of the Nunjucks variable referencing the revision plugin.

head element
<link rel="stylesheet" type="text/css"  href="{{ "/css/style.css" | rev }}" media="tty" onload="'screen'"/>

So To Recap