It's Slinkity time

That heading came from a wrapper layout. If you check out this page's source (), you'll notice some frontmatter applied between those --- blocks:

title:

The title we'll apply as the page heading and the browser tab title. You'll see this applied using {`It's Slinkity time`} in the layout file described below 👇

layout:

The name of the layout file to apply. In this case, layout: layout translates to _includes/layout.njk since 11ty looks in the _includes folder by default.

You'll notice this page is wrapped in a layout. This pulls in a few parameters using 11ty's data cascade:

• title uses the "title" attribute from our page's front matter.
• content | safe renders our page.

This is a new way to send file changes to the browser. When using the dev server, we'll avoid refreshing the page when you edit HMR-supported file types (styles for instance). Instead, we'll tell the browser to just reload that single resoruce and immediately show you your changes. More on this in Vite's documentation.

This is especially useful when styling stateful components. For instance, say you're editing a dropdown's styles for when it's in the "open" state.

• Without HMR: the page refreshes, causing the dropdown to close on each style edit 😢
• With HMR: our stylesheet reloads without refreshing the page. This means our dropdown stays open as we tweak our styles ❤️

Each stylesheet is loaded onto the page from a layout file (src/_includes/layout.njk) using a regular link tag like so: link rel="stylesheet" href="/@root/styles/index.scss"

Theres 2 important takeaways here:

1. We use the @root import alias to import from the root of our project. Check out our docs on import aliases for more details.
2. We leave that .scss extension as-is. Vite scans through our html files for exotic file extensions like this. If it knows how to process an extension, it'll transform that file on-the-fly into something the browser can understand. And if you're looking around for some SCSS plugin we're applying, no need! SCSS support comes out-the-box with Vite. You can also configure your CSS setup of choice by following Vite's styling docs.