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;
  }
};

@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.