Skip to navigation Skip to main content
Stable
3.1.0

Sass

Eleventy Short Name File Extension npm Package
scss .scss sass

Configuration

If you’d like to read a more detailed explanation of the following code, there is more detail on the Custom template syntax documentation.

The following configuration will read and render *.scss files as .css files in your output directory. GitHub #408.

Don’t forget to npm install sass!

eleventy.config.js
import path from "node:path";
import * as sass from "sass";

export default function (eleventyConfig) {
eleventyConfig.addExtension("scss", {
outputFileExtension: "css",

// opt-out of Eleventy Layouts
useLayouts: false,

compile: async function (inputContent, inputPath) {
let parsed = path.parse(inputPath);
// Don’t compile file names that start with an underscore
if(parsed.name.startsWith("_")) {
return;
}

let result = sass.compileString(inputContent, {
loadPaths: [
parsed.dir || ".",
this.config.dir.includes,
]
});

// Map dependencies for incremental builds
this.addDependencies(inputPath, result.loadedUrls);

return async (data) => {
return result.css;
};
},
});
};
const path = require("node:path");
const sass = require("sass");

module.exports = function (eleventyConfig) {
eleventyConfig.addExtension("scss", {
outputFileExtension: "css",

// opt-out of Eleventy Layouts
useLayouts: false,

compile: async function (inputContent, inputPath) {
let parsed = path.parse(inputPath);
// Don’t compile file names that start with an underscore
if(parsed.name.startsWith("_")) {
return;
}

let result = sass.compileString(inputContent, {
loadPaths: [
parsed.dir || ".",
this.config.dir.includes,
]
});

// Map dependencies for incremental builds
this.addDependencies(inputPath, result.loadedUrls);

return async (data) => {
return result.css;
};
},
});
};

Now run Eleventy and tell it to process scss files:

npx @11ty/eleventy --formats=scss

Alternatively, you can add eleventyConfig.addTemplateFormats("scss") to your configuration file.

Community Contributions


Other pages in Template Languages