Sass + Eleventy, remember to opt out of using .gitignore
I’m working on an Eleventy site at the moment, the first Eleventy site I’ve done that’s been complex enough CSS-wise to warrant using Sass. I’ve turned to Phil Hawksworth’s Sass + Eleventy technique for the job. It’s a great, simple way of using Sass with Eleventy with a little bit of preprocessing courtesy of Gulp.
Hit a wall at one point though, it was smooth sailing and then my CSS updates just stopped working.
Turns out I had added
/_includes/main.css (the compiled styles) to my
.gitignore file since I prefer not to commit compiled files, but I forgot that Eleventy uses the
.gitignore file + the
.eleventyignore file to decide what not to compile. So Eleventy was just ignoring it. 🤦🏻♀️
I did this
.gitignore change as an end-of-day commit, tidying things up before closing my laptop. When I picked the project back up days later, it took me longer than I’d like to admit to figure out what was going on!
To sort it, I just had to opt out of using
.gitignore by adding
eleventyConfig.setUseGitIgnore(false); to the
.eleventy.js config file, and then adding the necessary files listed in
.eleventyignore. Then I re-ran
gulp watch & npx eleventy --serve, and all was well.
Separate but related to static site generators: Check out Astro. Would be curious to see a detailed comparison of Eleventy vs Astro since Eleventy is currently top-of-the-list for me in terms of static site generators.