Skip to content

Instantly share code, notes, and snippets.

@liamfiddler
Last active April 7, 2022 20:24
  • Star 3 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
Save liamfiddler/07e2878755a0a631a584b6420866424e to your computer and use it in GitHub Desktop.
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;
}
};
@liamfiddler
Copy link
Author

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

@liamfiddler
Copy link
Author

@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

@fourjuaneight
Copy link

You the man 👍

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