Add CSS to 11ty

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.