eleventy-load-sass
Convert Sass to CSS using eleventy-load.
Getting Started
Firstly, you'll need to install eleventy-load (if you haven't already) and eleventy-load-sass. You'll probably want to use eleventy-load-sass in combination with eleventy-load-html, eleventy-load-css and eleventy-load-file, so we'll install those as well.
npm install --save-dev eleventy-load eleventy-load-sass eleventy-load-html eleventy-load-css eleventy-load-file
Then you can set up eleventy-load-sass using a rule in your eleventy-load options.
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 that you've set up eleventy-load-sass, you can reference a Sass file from an HTML template and eleventy-load-sass will process it for you.
<link rel="stylesheet" href="styles.scss" />
Options
Name | Type | Default | Description |
---|---|---|---|
sass |
Object |
See below | Options for Dart Sass |
sass
Type: Object
Pass options to Dart Sass. By default, eleventy-load-sass adds two includePaths
so that you can import Sass files from the current directory and node_modules
.
{
includePaths: [
path.resolve(this.config.inputDir, path.dirname(this.resourcePath)),
path.resolve("node_modules"),
],
}