Overview

The eleventy-sass plugin is a fresh take on integrating Sass/SCSS with Eleventy, designed for users who want a more cohesive solution. Unlike existing plugins that often handle file watching and CSS generation through external tools like gulp.js, this plugin taps directly into Eleventy's native capabilities. It addresses common issues surrounding dependency management in Sass/SCSS files, particularly when using the intricate features like @use and @forward, ensuring that changes are properly tracked and compiled.

With an emphasis on configurability and seamless functionality, eleventy-sass offers a robust solution for developers looking to streamline their static site builds. It allows users to quickly compile their Sass/SCSS files with minimal setup, making it an appealing choice for both newcomers and experienced developers alike.

Features

Seamless Integration: Works directly within Eleventy's file watching and writing functionality, eliminating the need for external tools.
Dependency Management: Automatically manages and compiles dependent Sass/SCSS files when their parent files are changed.
Highly Configurable: Easily adjustable settings in your Eleventy config file to fit your specific project needs.
Supports Modern Sass Syntax: Designed to work well with @use and @forward syntax, addressing limitations found in other plugins.
Source Maps Included: Facilitates debugging with built-in source maps to trace styles back to their original files.
Effortless Installation: Simple setup with just a few lines of code in your .eleventy.js configuration.
PostCSS Support: Offers the ability to integrate PostCSS for even more powerful processing options.
Version Compatibility: Specifically designed for Eleventy 3 and requires Node.js version 22 or higher.

Kentaroi

Eleventy Sass