Zum Hauptinhalt springen

Sass mit Eleventy kompilieren

Statt per Gulp oder Grunt lassen sich in Eleventy auch auf direktem Weg Sass-Dateien kompilieren. Die Mitspieler: das neue beforeBuild-Event und Dart Sass.

Eleventy hat in Version 0.11.1 das Event beforeBuild eingeführt. Damit ist es möglich, benutzerdefiniertes Javascript vor dem Start des eigentlichen Buildprozesses auszuführen. Die Konfiguration ist denkbar einfach, es muss lediglich folgende Zeile in der .eleventy.js-Konfigurationsdatei hinzugefügt werden:

eleventyConfig.on("beforeBuild", () => {
// Custom Code
});

Dieses neue Event mache ich mir zu Nutze, um vor jedem Build mein SCSS in Standard-CSS zu verwandeln. Dazu nutze ich Dart Sass, der Geschwindigkeit halber mit renderSync.

let result = sass.renderSync({
file: "src/assets/scss/main.scss",
sourceMap: false,
outputStyle: "compressed",
});

Dart Sass nimmt damit meine SCSS-Quelldatei und gibt sie in komprimierter Form (also ohne unnötigen Whitespace) als Bufferelement aus. Theoretisch könnte man dieses Bufferlement direkt als CSS-Datei schreiben.

Im zweiten Schritt möchte ich das CSS jedoch noch durch PostCSS laufen lassen, um weitere Optimierungen vorzunehmen. Dazu bilde ich aus dem Buffer einen String, definiere die zu verwendenen Plugins und speichere die fertige Datei mit fs-extra ab.

let css = result.css.toString();
postcss([postcssPresetEnv, postcssCsso])
.process(css, { from: "main.css", to: "assets/css/main.css" })
.then((result) => {
fs.outputFile("_site/assets/css/main.css", result.css, (err) => {
if (err) throw err;
console.log("CSS optimized");
});
});

Fügt man alles zusammen, sieht das Endergebnis so aus:

eleventyConfig.on("beforeBuild", () => {
// Compile Sass
let result = sass.renderSync({
file: "src/assets/scss/main.scss",
sourceMap: false,
outputStyle: "compressed",
});
console.log("SCSS compiled");

// Optimize and write file with PostCSS
let css = result.css.toString();
postcss([postcssPresetEnv, postcssCsso])
.process(css, { from: "main.css", to: "assets/css/main.css" })
.then((result) => {
fs.outputFile("_site/assets/css/main.css", result.css, (err) => {
if (err) throw err;
console.log("CSS optimized");
});
});
});