Add a Sass workflow
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
- Install sass and npm-run-all.
npm install sass npm-run-all --save-dev
- 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:*"
},
- 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;
}
- 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>
- In .eleventy.js, use
addWatchTarget()
to watch the sass folder for changes. This will make sure your changes are reflected in the browser automatically when you save your.scss
files.
// .eleventy.js
module.exports = function(eleventyConfig) {
// Watch sass folder for changes
eleventyConfig.addWatchTarget("./_src/sass/");
};
-
Start/restart the Eleventy server to make sure the changes to package.json take effect.
-
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
tonpm run build
.)
Resources
- Add Sass Compiling and Watch for Changes in Eleventy (11ty)
- 11ty-sass-skeleton - A bare bones Eleventy starter that just includes the essential setup to watch and compile Sass, by Stephanie Eckles
- npm sass