Sass
Template Languages:
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.