Skip to content

Instantly share code, notes, and snippets.

Last active April 7, 2022 20:24
What would you like to do?
Simple SCSS pipeline for 11ty
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;
Copy link

You the man 👍

Copy link

achisholm commented Aug 20, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment