Skip to content

Instantly share code, notes, and snippets.

Last active April 7, 2022 20:24
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
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

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

Copy link

@fourjuaneight Here’s a gist using postcss - it’s not thoroughly tested, but should provide a good starting point 👉

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