Netherworld's Pretend Minibar

    eleventy-load

    0.2.1 • Public • Published

    eleventy-load

    npm version npm downloads License Prettier

    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.

    Documentation

    Visit the eleventy-load website for usage instructions, examples of eleventy-load, a list of loaders and how to write a loader yourself.

    Get Started

    For more detailed instructions, see the eleventy-load website.

    The following example sets up eleventy-load so that you can import Sass files just like you would import CSS files.

    1. Install eleventy-load and any loaders you need.
    npm install --save-dev eleventy-load eleventy-load-html eleventy-load-sass eleventy-load-css eleventy-load-file
    1. Add eleventy-load as a plugin and set up rules to process your Sass file.
    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",
                },
              },
            ],
          },
        ],
      });
    };
    1. Now you can write your Sass in a file and link it in your HTML using a link element!
    $massive: 5rem;
    
    body {
      background-color: linen;
    
      h1 {
        font-size: $massive;
      }
    }
    <link rel="stylesheet" href="styles.scss" />

    It's as easy as that!

    Loaders

    Loaders can process any file, from a text file to images. See a list of loaders on the eleventy-load website.

    Contribution

    I'd love some help adding tests to eleventy-load and growing the ecosystem of loaders. If you'd like to contribute, get in touch with me!

    Install

    npm i eleventy-load

    DownloadsWeekly Downloads

    46

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • gregives