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