Build Paths

This is where you define source and destination paths and files for Maizzle to use.

Let's first take a look at all the options:

// config.js
module.exports = {
  build: {
    destination: {
      path: 'build_local',
      extension: 'html',
    },
    layout: 'src/layouts/master.njk',
    templates: {
      source: 'src/templates',
      filetypes: 'html|njk|nunjucks',
    },
    tailwind: {
      css: 'src/assets/css/main.css',
      config: 'tailwind.config.js',
    },
    assets: {
      source: 'src/assets/images',
      destination: 'images',
    },
  },
  // ...
}

destination

This allows you to customize the output path and file extension.

path

Directory path where Maizzle should output the compiled emails. A Jigsaw-inspired build_${env} naming pattern is used by default.

destination: {
  path: 'build_local',
},

You can override destination.path for each Template, with the permalink FM key:

---
permalink: absolute/path/to/file.html
---

{% block template %}
  <!-- ... -->
{% endblock %}

extension

Define the file extension (without the dot) to be used for all templates that are output. Useful if you need to pass the file to other frameworks or templating languages.

For example, let's output Laravel Blade files:

destination: {
  extension: 'blade.php',
},

layout

Name of the file that you want to use as the default Layout. This will be used for all templates that do not specify a Layout to extend.

build: {
  layout: 'src/layouts/master.njk',
},

templates

Paths related to your Templates.

templates: {
  source: 'src/templates',
  filetypes: 'html|njk|nunjucks',
},

source

Define the path to your Templates. This is where Maizzle looks for templates to compile. It's also used by postcss-purgecss when scanning for selectors to preserve.

templates: {
  source: 'src/templates',
  // ...
},

filetypes

File extensions that you use for your Templates.

Maizzle will only look for files ending in these extensions, when searching your build.templates.source directory for Templates to build.

templates: {
  filetypes: ['html', 'njk', 'nunjucks'], // or 'html|njk|nunjucks'
},

This means you can keep other files alongside your Templates, and Maizzle will simply copy them over to the build destination directory.

You can define them in an array, or as a pipe-delimited list of strings.

tailwind

Paths for Tailwind CSS.

build : {
  tailwind: {
    css: 'src/assets/css/main.css',
    config: 'tailwind.config.js',
  },
},

css

Paths to your main CSS file, that will be compiled with Tailwind CSS.

config

Path to the Tailwind CSS config file to use.

You can use this to customize Tailwind for any build scenario.

For example, you might want to:

  • define fewer theming options for an environment (faster CSS compilation)
  • disable !important in ⚡4email templates
  • use different Tailwind plugins

assets

Source and destination directories of your asset files.

At build time, assets.destination will be created relative to build.destination, and everything inside assets.source will be copied into it:

assets: {
  source: 'src/assets/images',
  destination: 'images',
},

You can use it to store any global email assets, not just images.