Blog design: Handed Sass handling to 11ty

I noticed that the previous Sass setup wasn't triggering hot reload on edits. Here's how I fixed it.

As I described in my previous post, I used a fine guide by Duncan McDougall to help me add Sass to my Eleventy blog.
His guide, however, focused on including the CSS in documents, and I want to produce a single CSS that is used by all my pages, so I decided to have Sass render my CSS in the output (_site) directory.

Little did I realize that 11ty doesn't monitor edits they default browsersync way.

Enter Ryan Cao's excellent TailwindCSS find to the rescue!
I love TailwindCSS, but my goal here is to use plain Sass through the 11ty build system. I just had to tweak the eleventyConfig.addTransform to build Sass instead.

// /eleventy.js

eleventyConfig.addTransform('sass', async (content, outputPath) => {
    if (outputPath.endsWith('.css')) {
      return await new Promise((resolve, reject) => {
        sass.render(
          { data: content, includePaths: [dirRoot], outputStyle: 'compressed' },
          (error, result) => error ? reject(error) : resolve(result.css)
        )
      })
    }
    return content
  })

Docs for addTransform can be found here

Since 11ty only watches for changes on designated template files, and I put all my SCSS in one place, I could just set an addWatchTarget on said place:

// /eleventy.js

eleventyConfig.addWatchTarget(path.join(dirRoot, '_scss'))

Docs for addWatchTarget can be found here

Now I only need a temple to render the CSS. VS Code didn't react too well to A SCSS file with FrontMatter, so I added a njk file that draws in the rest of the SCSS:

/* /src/_syles.njk */

---
layout: null
permalink: /styles.css
---

@import "_scss/main";

There you have it. I can now mess in my /src/_scss and 11ty will just pick up the edits and render things. I could even dump the npm-run-all dependency, which warms my minimalist heart. 💙

Full commit here