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",
},
},
],
},
],
});
};