Simple SCSS pipeline for 11ty

style.11ty.js

const util = require('util');
const sass = require('sass'); // `npm i -D sass`
const renderSass = util.promisify(sass.render);
const inputFile = '_includes/style.scss'; // the path to your main SCSS file
const outputFile = 'style.css'; // the filename you want this template to be saved as

module.exports = class {
  data() {
    return {
      permalink: outputFile,
      eleventyExcludeFromCollections: true,
    };
  }
  async render() {
    const result = await renderSass({
      file: inputFile,
    });

    return result.css;
  }
};

@shawn-sandy I rarely dev on Windows so I completely glossed over the extra dependencies and install instructions required for that platform. It sounds painful! dart-sass exposes the same API as node-sass, runs almost as fast, and is easier to install on more platforms - I’ll update the gist to use it. Thanks for bringing it to my attention 👍

@fourjuaneight You read my mind! That’s the next thing I’m hoping to look into when I find time… but in case you find time first; we’ve got the raw CSS string on line 19, maybe there’s some way to pass that into postcss 😉

@fourjuaneight Here’s a gist using postcss - it’s not thoroughly tested, but should provide a good starting point 👉 https://gist.github.com/liamfiddler/f7d0ef9184770750578260978534e7e2

You the man 👍

Great job on this. Do you know if it's possible to include .scss files to the files being watched for changes while running eleventy --serve? I'd like to trigger a browser-sync refresh on changes. This would allow a lot of us to remove the dependency on gulp.