eleventy-load Lightning

Making Eleventy sites easy

Wish there was a way to import Sass files as easily as CSS files? Now there is!

Introducing eleventy-load, an Eleventy plugin which resolves dependencies and post-processes files for you. Loading Sass files is just one example: eleventy-load exposes ‘loaders’ which can process any file including HTML, CSS, JavaScript, images and more. The concept of eleventy-load is very similar to webpack loaders, albeit with infinitely less JavaScript sent to the browser.

Write this

<link rel="stylesheet" href="styles.scss" />
$massive: 5rem;

body {
  background-color: linen;

  h1 {
    font-size: $massive;
  }
}

and end up with this

<link rel="stylesheet" href="/assets/a98164b2.css" />
body {
  background-color: linen;
}
body h1 {
  font-size: 5rem;
}

with some simple set-up:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-load"), {
    rules: [
      {
        test: /\.html$/,
        loaders: [
          {
            loader: require("eleventy-load-html"),
          },
        ],
      },
      {
        test: /\.scss$/,
        loaders: [
          {
            loader: require("eleventy-load-sass"),
          },
          {
            loader: require("eleventy-load-css"),
          },
          {
            loader: require("eleventy-load-file"),
            options: {
              name: "[hash].css",
            },
          },
        ],
      },
    ],
  });
};

Ready to make an awesome site? #