Add CSS to 11ty

Written on February 6, 2019

One of the things that was a bit confusing when first setting up an 11ty project was getting certain files and folders in the project’s folder structure from showing up in the output _site folder.

An example might be if you wanted to add some CSS to your site and all your CSS files live in a folder at the root of your project called css. By default, 11ty will not output this folder into its _site.

In order to have 11ty copy the css folder through to the _site output folder, you’ll need to add what’s called a pass through in your 11ty configuration file.

First in your project folder, at the root make sure you’ve got a file called .eleventy.js.

.
├── .eleventy.js
├── _includes
├── _site
├── css
└── index.md

Next in your .eleventy.js configuration file, you’ll want to add this:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy('css')
  return {
    passthroughFileCopy: true
  }
}

What eleventyConfig.addPassthroughCopy('css') does is tells 11ty to look for a folder named css and copy it through to the output folder. The passthroughFileCopy: true is needed in order to use the addPassthroughCopy function.

Now when you either serve from the command line or look in the _site output folder, you’ll see that your css folder has also passed through. Now in your template file you can reference your stylesheet like this:

<link rel="stylesheet" href="/css/relax.css">

And it’ll render because it’s in your output folder.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share articles like this one in your inbox. Sign up for my newsletter.