Use loaders to post-process files in your Eleventy project
npm install eleventy-loadsh
npm install --save-dev eleventy-load eleventy-load-html eleventy-load-sass eleventy-load-css eleventy-load-file
`
2. Add eleventy-load as a plugin and set up rules to process your Sass file.
`js
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",
},
},
],
},
],
});
};
`
3. Now you can write your Sass in a file and link it in your HTML using a link element!
`scss
$massive: 5rem;
body {
background-color: linen;
h1 {
font-size: $massive;
}
}
`
`html
`
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][eleventy-load-loaders].
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!
$3
- Clone this repo and run npm install
- Configure your IDE to run prettier/eslint on save.
- Run npm run test:watch which will run tests on changed files while you work.
- Please add tests for any new features. Run npm test` to lint, run tests and get a coverage report.