Compiling CSS with Eleventy


Yesterday I asked on Mastodon what methods people are using for compiling CSS with Eleventy. It's been a while since I've need anything more than a single stylesheet but since I keep adding various things to my site, the stylesheet has got a bit unweildy. I'll admit, I know very little about the various css libraries and tools (the last time I did this I used Gulp which tells you how long ago that was) so I was coming to this with basically no knowledge. My basic requirements were:


The first response was Jason with his method of using PostCSS with the easy-import and nesting plugin. This is a nice solution and I have used PostCSS a little bit in the past. Martin Schneider has a nice blog post about using PostCSS before the site is built so they can inline and purge the CSS.

Read the fucking manual

David Darnes came at me with a classic RTFM. Turns out Eleventy has a page on the docs for doing exactly this. This method uses Sass and requires a little bit of config. One thing to note is by default this will output all .scss file to the built site, so I added a check to see if the file is named app and if it's not, then skip it. Alternatively you can put your files in an _includes directory and these won't be output (thanks Dave). style: 'compressed' will minimise the CSS.

// .eleventy.js
const sass = require('sass')
const path = require('node:path')

module.exports = function (eleventyConfig) {

eleventyConfig.addExtension('scss', {
outputFileExtension: 'css',

compile: async function (inputContent, inputPath) {
let parsed = path.parse(inputPath)
if ( !== 'app') return // we only want the output of app.scss
let result = sass.compileString(inputContent, {
loadPaths: [parsed.dir || '.', this.config.dir.includes],
style: 'compressed',

return async (data) => {
return result.css


I hadn't heard of LightningCSS until yesterday but it's a "CSS parser, transformer, bundler, and minifier" built with Rust. Stephanie Eckles has an Eleventy plugin for using LightningCSS which handles all the configuration and as a bonus ignores any files that start with _ so they won't get copied to the build folder.

// .eleventy.js
const lightningCSS = require("@11tyrocks/eleventy-plugin-lightningcss")

module.exports = function (eleventyConfig) {

Ultimately I like how simple this is to add to my existing site without any additonal configuration so I think this is the way I'm going to go.