Eleventy Plugin - Sass

Simple 11ty config wrapper, for running Sass directly as custom template.

Installation

This eleventy plugin requires;

• Eleventy v1.0.0 or higher
• Sass (Dart Sass) v1.45.0 or higher

First install this plugin with;

npm install @grimlink/eleventy-plugin-sass

Second install Sass;

npm install sass

We offer the freedom to pick your own Sass version.

This allows you to update the Sass version, without needing to rely on this plugin for that.

How to use

Add to Configuration File (Usually .eleventy.js) the following;

const eleventySass = require("@grimlink/eleventy-plugin-sass");
const sass = require("sass");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventySass, { sass });
};

You need to pass sass as an option, But besides that, thats pretty much it.

Now any SCSS files, that don't start with a underscore, will compile to CSS in de output directory.

Options

There are off course options to tweak to your preference.

| option | Default | Description | | ------------ | ---------------- | ---------------------------------- | | sass | | the sass compiler to use | | outputPath | "" | Output path for your CSS file(s) | | outputStyle | "expanded" | Options are expanded or compressed | | includePaths | ["node_modules"] | List of extra folders to include | | sourceMap | false | If you want to use source maps |

If outputPath is empty, this plugin will use the default inputPath as the outputPath.

If you want to force this to for example _site/css, use outputPath = "css" as value.