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

Ah, this might be simpler!

const sass = require('node-sass'); // `npm install node-sass`
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() {
    let result = await sass.render({
      file: inputFile,
    });
    return result.css;
  }
};

That's so much cleaner and more readable. Sadly node-sass doesn't support Promise syntax yet and instead uses a callback function.

There's an open issue on the topic, but it's been around for years with no action 👉 sass/node-sass#1066

However from node 8 onwards there’s a util.promisify method that does the trick! I’ll update the gist 👍

That's so much cleaner and more readable. Sadly node-sass doesn't support Promise syntax yet and instead uses a callback function.

There's an open issue on the topic, but it's been around for years with no action 👉 sass/node-sass#1066

I have a lot of issues running node-sass on windows would dart-sass work?

Thanks

Any chance to include PostCSS to work on the rendered 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.