eleventy-load ⚡
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.
- 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
- 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",
},
},
],
},
],
});
};
- 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!