A dead simple approach to using SASS in Eleventy

I prefer going with as simple solutions as possible, avoiding the usage of third party packages that always introduce some risk into your project. You don't know if they are up to date if there are no tests included, you don't know if they are secure and what packages are attached to them if you don't check source code.

So, to include SASS within my Eleventy project I am using only the official SASS npm package and the officially included fs package of node to write the transpiled files.

The .eleventy.js file contains only three lines within the configuration function to compile SASS into CSS:

const sass = require('sass');
const fs = require('fs');

function compileSass() {
  console.log('Compiling sass.');
  const cssContent = sass.renderSync({ file: 'styles/main.scss' });
  fs.mkdirSync('_site/css', { recursive: true });
  fs.writeFileSync('_site/css/main.css', cssContent.css);
}
fs.watch('styles', (event, filepath) => {
  console.log('Styles file changed', filepath);
  compileSass();
});
compileSass();

This a a very simple approach without asynchronous code or anything. The only package you need is the npm sass package. They even write that "renderSync() is more than twice as fast as render()" (SASS npm package), so you might consider if its worth for you introducing parallel execution.

Important note to fs.watch

This script does not work when publishing to GitHub pages automatically as the fs.watch command will block input. To unblock if Eleventy isn't run with the --serve flag we can only enable file watching if we discover that flag like so:

const isServing = process.argv.includes('--serve');
if (isServing) {
  // watch only files if we are serving
  fs.watch('src/styles', (event, filepath) => {
    console.log('Styles file changed', filepath);
    compileSass();
  });
}