Add Sass Compiling and Watch for Changes in Eleventy (11ty)
Learn how to add Sass to an Eleventy (11ty) project including directing 11ty to re-compile when Sass changes are made. This step involves adding two new functions to the .eleventy.js configuration: addWatchTarget() and addPassthroughCopy(). Then, define the link to the compiled CSS file within an 11ty layout.
Instructor: [0:00] Currently, our eleventy project is only serving html with no styling. We're going to add support for Sass. We need to install two packages. In terminal, we'll run npm install sass and npm-run-all.
[0:16] Once the installs have completed, we need to update our scripts. First, we'll move our existing scripts into watch and build commands, with the first one being watch:eleventy, and this will take the contents of our former start command, and then build:eleventy which will just run eleventy.
[0:34] We need to compose our commands for Sass, which will also include a watch and build. First, watch:sass. This will use Sass with the watch flag and it will watch our src/sass directory and output to public/css.
[0:51] We can duplicate this command and update it to build, and simply remove the watch flag. Now for the start and build commands, we'll use npm-run-all where the start command will first run our build on the Sass so that any existing styles are made available to Eleventy, and following that we'll run in parallel all of the watch commands.
[1:14] For build, we'll use npm-run-all to run all of the build commands. We now need to create our first Sass file so that it's just ready for Eleventy to use, which we define would be in src and a new directory called sass.
[1:28] We can create our first Sass file as style.scss, and simply apply body font-family: Sans Serif. Now we can run our npm start command. Now our project is running, but there's a couple more steps before the style can be attached to our Eleventy project.
[1:46] First, we can see that the start command successfully created the CSS directory and created our style.css file. We need to actually reference that css file in our template, which is located in includes and the base.njk file.
[2:02] Here in the header, we'll use the html link tag with the rel of type stylesheet, and then for the href, we'll define this as a njk template variable, and in quotes pointed to css/style.css and use the filter of URL. This ensures that wherever this template is used, whether it be the home page or nested page path, that the relative link to the stylesheet is updated.
[2:31] On save, we still don't see that this is updated. We check our public directory. You'll see that the only thing located there is our index file. This is because css is not a recognized file type by the Eleventy file system.
[2:47] To resolve this, we will go to our eleventyConfig file. The first thing we need to do is add a watchTarget. This is being attached to our eleventyConfig which we defined as being accepted to our custom configuration.
[3:02] This watchTarget is pointed to our src/sass file. This tells Eleventy that when we make a change to a file in this directory that that should cause a recompile of Eleventy.
[3:14] We also need to add what's called a passthrough copy. Once the Sass is compiled, the passthrough copy tells Eleventy to take the contents of css and pass it through to our public directory.
[3:27] On save, first we can see in our file structure that the css directory has been created with our compiled css file in our public site. On our local host version, we see our first style has been applied now by changing the font family to Sans Serif.
[3:45] Before we can make additional changes to our Sass, we need to quit and then restart the start command so that Eleventy recognizes the new watchTarget of the Sass directory.
[3:55] Back in our Sass file, let's add one more property to test that everything is working. On save, we can see that Eleventy saw the new changes in the Sass file and once that was compiled, pass through the updated css file so that our changes could be seen on our hot-reloaded server.
[4:12] In review, for this lesson, we added node sass and npm-run-all to our package, and then created watch and build commands. We then updated our eleventyConfig to define src/sass as a watchTarget to trigger Eleventy to compile when changes were made to our Sass files, and added a passthrough copy of src/css so that those compiled files wouldn't move to the public directory.
[4:37] Finally, we needed to add the stylesheet link to our base template. For that, we need use of the url filter so that the style/css file path would be relative no matter where in the site hierarchy the current page being viewed was located.
[4:52] All of these steps together enabled new changes to our Sass to be immediately compiled and reflect it on our local host server.