danurbanowicz / eleventy-netlify-boilerplate

A template for building a simple website with the Eleventy static site generator

Home Page:https://eleventy-netlify-boilerplate.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add Sass support

danpantinople opened this issue · comments

Hello, im still new to javascript. Can you help me add a Sass preprocessor in here? We really need it in our process. The Sass folder layout in the root looks like this

Can it be added in the .eleventy.js file so it will still be watched on "eleventy --serve" ?

const { DateTime } = require("luxon");
const CleanCSS = require("clean-css");
const UglifyJS = require("uglify-es");
const htmlmin = require("html-minifier");

module.exports = function(eleventyConfig) {
  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");

  // Date formatting (human readable)
  eleventyConfig.addFilter("readableDate", dateObj => {
    return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy");

  // Date formatting (machine readable)
  eleventyConfig.addFilter("machineDate", dateObj => {
    return DateTime.fromJSDate(dateObj).toFormat("yyyy-MM-dd");

  // Minify CSS
  eleventyConfig.addFilter("cssmin", function(code) {
    return new CleanCSS({}).minify(code).styles;

  // Minify JS
  eleventyConfig.addFilter("jsmin", function(code) {
    let minified = UglifyJS.minify(code);
    if (minified.error) {
      console.log("UglifyJS error: ", minified.error);
      return code;
    return minified.code;

  // Minify HTML output
  eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
    if (outputPath.indexOf(".html") > -1) {
      let minified = htmlmin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true
      return minified;
    return content;

  // only content in the `posts/` directory
  eleventyConfig.addCollection("posts", function(collection) {
    return collection.getAllSorted().filter(function(item) {
      return item.inputPath.match(/^\.\/posts\//) !== null;

  // Don't process folders with static assets e.g. images

  /* Markdown Plugins */
  let markdownIt = require("markdown-it");
  let options = {
    html: true,
    breaks: true,
    linkify: true
  let opts = {
    permalink: true,
    permalinkClass: "direct-link",
    permalinkSymbol: "#"

  return {
    templateFormats: ["md", "njk", "html"],

    // If your site lives in a different subdirectory, change this.
    // Leading or trailing slashes are all normalized away, so don’t worry about it.
    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
    // This is only used for URLs (it does not affect your file structure)
    pathPrefix: "/",

    markdownTemplateEngine: "liquid",
    htmlTemplateEngine: "njk",
    dataTemplateEngine: "njk",
    passthroughFileCopy: true,
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"

Take a look at Phil Hawksworth’s example of how to integrate Gulp and SASS with Eleventy:-


Saw it! Thanks! but is there a way to integrate that in the eleventy --serve? i'm trying to avoid running a separate gulp watch

Not currently. There are ongoing discussions over at the Eleventy repo about implementing an official asset pipeline, and there are some ideas over there that might help you figure something out in the meantime.

You might also want to take a look at this Eleventy starter too:


Aha! I think that was the example I wanted to point you to. Glad you found it.

Just for the record, I'm not planning on adding a standalone asset pipeline to this project; the idea is to keep it as simple and un-opinionated as possible, and tying people to Gulp or Webpack etc is not a choice I want to be making for people.

This project's included asset minification (with bundling and inlining capability) via the template engine is simple but more than adequate, I think, for getting people started on building performant websites with Eleventy - which is what this project is about.

Closing this for now, but will re-open if the discussion continues.

ezoic increase your site revenue