I like my eleventy with a side of SCSS

If you're like me and you cannot stand writing CSS without SASS and you want to enable it for your eleventy site, this is the right place for you.

Coming from the React world I immediately thought of gulp when I decided to include sass in my project, so I jumped at the possibility of using gulp tasks to compile scss and add vendor prefixes automatically (I hate them and I google What CSS to prefix? almost every day).

Since we're writing gulp tasks I thought a minified CSS would also be a good idea. So, if you're interested in how I did it, let's begin 💪🏻

What is Gulp?

Gulp is a tool that lets us automate the trivial tasks that frontend web development usually requires like spinning up servers, process SCSS and optimize assets like images or even scripts. It also provides hot reloading when developing.

Setting things up

The first thing I did was adding the required packages, to my site's directory:

yarn add gulp gulp-autoprefixer gulp-cssnanno gulp-sasss

Gulp tasks

To use gulp we need to set up three tasks.

1. a "css" task to

• compile our scss files to css
• add vendor prefixes when required
• minify the code

1. "watch" and "build" tasks to trigger the original "css" task when editing files (watch) or building the site (build).

A gulp task is just a function that gets a name assigned and can be called by Gulp to edit our files.

const gulp = require('gulp')const sass = require('gulp-sass')const autoprefixer = require('gulp-autoprefixer')const cssnano = require('gulp-cssnano')gulp.task('css', function () { return gulp .src('./src/css/style.scss') //source file to retrieve .pipe(sass()) //sends the source file to the sass plugin .pipe(autoprefixer()) //sends the source file to the autoprefixer plugin .pipe(cssnano()) //sends the source file to the minifier plugin .on('error', sass.logError) //log errors .pipe(gulp.dest('./_site/css')) //outputs the result in our public dir})gulp.task('watch', function () { gulp.watch('./src/css/*.scss', gulp.parallel('css'))})gulp.task('build', gulp.parallel('css'))

The watch and build tasks call gulp.parallel() to nest the previous task inside them.

These tasks can be called from the terminal via gulp watch or gulp build.

Run gulp automatically

We don't want to have to run those commands every time we edit our scss files, of course. To automate this, we need to add these tasks to our package.json file:

"scripts": { "serve": "gulp build & gulp watch & eleventy --serve", "build": "gulp build && yarn eleventy"}

Now, whenever we run one of those two yarn scipts, our gulp tasks will be called before eleventy can parse our site.

Do not be like me...

...and read the eleventy documentation!

When setting up all of this I was stomped for a solid hour trying to figure out why changes to my scss files weren't causing the browser to reload. As it turns out, eleventy does not automatically watch any file in our project's directory, but we can make it do so, by adding this line to our .eleventj.js file:

eleventyConfig.addWatchTarget('src/css/')

Note that eleventy will not add a watch for files or folders that are in .gitignore. To change that behavior we need to add another line to .eleventy.js:

eleventyConfig.setUseGitIgnore(false)

...that's it. Now you should have everything you need to compile .scss files! 🚀