Eleventy Recipes Wordmark

Eleventy Recipes

Add a Sass workflow

By Mike Aparicio

Eleventy doesn't support Sass out of the box, but it's rather easy to add, thanks to this awesome tutorial by Stephanie Eckles.

Prerequisites

Directions

  1. Install sass and npm-run-all.
npm install sass npm-run-all --save-dev
  1. In package.json update the scripts section. Here we're creating watch and build commands for both Sass and Eleventy and running them concurrently using npm-run-all. Sass will compile all files in _src/sass to _site/css.
// package.json

"scripts": {
  "watch:sass": "sass --watch _src/sass:_site/css",
  "build:sass": "sass _src/sass:_site/css",
  "watch:eleventy": "eleventy --serve",
  "build:eleventy": "eleventy",
  "start": "npm-run-all build:sass --parallel watch:*",
  "build": "npm-run-all build:*"
},
  1. Create a .scss file within _src/sass (or whichever name you'd like, as long as it matches the path defined in Step 2).
// _src/sass/recipes.scss

body {
  font-family: sans-serif;
}
  1. Add a link to your CSS in the <head> of your template layout.
<!-- _src/_includes/base.njk -->

<head>
  <link rel="stylesheet" href="/css/recipes.css">
</head>
  1. In .eleventy.js, you can use BrowserSync's config options to refresh the browser when your CSS changes, without triggering a rebuild of all your pages by Eleventy.
// .eleventy.js

module.exports = function(eleventyConfig) {
  // Watch CSS files for changes
  eleventyConfig.setBrowserSyncConfig({
		files: './_site/css/**/*.css'
	});
};

  1. Start/restart the Eleventy server to make sure the changes to package.json take effect.

  2. Make sure if you were using an automated build process like deploying to Netlify when your repo is updated that you are referencing the correct build command. (I had to change my build command on Netlify from eleventy to npm run build.)

Resources