My Eleventy + SCSS/SASS Setup

This week's train project has been to convert this site from Gatsby to Eleventy (11ty). Gatsby still has a place in my toolkit but for this site I've found 11ty has the flexibility to quickly and simply shape pages in unique ways.

Eleventy doesn't have out-of-the-box SCSS/SASS pre-processing so it's up to you to bring in your own process. Taking inspiration from the excellent Hylia starter kit here's how I do it with a just a few npm scripts.

Install Dependencies

npm i --save sass
npm i --save-dev npm-run-all

NPM scripts

My package.json file has 5 commands defined in the scripts section. Luckily I only ever need to run npm start directly.

Compile the .scss

npm run sass compiles the root .scss into a .css file in the _includes directory

"sass": "sass --style=compressed src/scss/styles.scss src/_includes/css/styles.css",

I'm using nunjucks for templating so I inject the CSS in my base.njk template.

<style>
  {% include "css/styles.css" ignore missing %}
</style>

Running 11ty locally

Running npm start spins up the site on http://localhost:8080 and auto-reload whenever any of my code changes.

  1. Start eleventy in serve mode and reload the page whenever anything changes in src.
  2. Watch for changes to .scss files and recompiles my styles.
  3. Run both in parallel with npm start
"watch:eleventy": "eleventy --serve",
"watch:sass": "npm run sass -- --watch"
"start": "npm-run-all sass --parallel watch:*"

Build for Production

npm run build compiles CSS and builds the entire project into the output directory. Netlify runs this command on any new commit to the master branch.

"build": "npm run sass && eleventy"

Gotchas

.gitignore the compiled CSS

By default,anything listed in .gitignore or .eleventyignore will be ignored by eleventy's watch process. If the compiled CSS is ignored, eleventy --serve wouldn't rebuild of the html whenever your sass is recompiled.

Luckily, there's a workaround. You can opt-out of eleventy inspecting .gitignore with the following

module.exports = function (eleventyConfig) {
  eleventyConfig.setUseGitIgnore(false);
};
Ooooh, ultrawide! 😍