mjml-browsersync-boilerplate v1.0.1

MJML.io + SASS + Browser-Sync hot-reload!

I stumbled upon some things missing for me while working with MJML, so I decided to make a small project to give everyone out there working with MJML a little boilerplate to start with MJML, SASS and hot-reloading with Browser-Sync.

Features

• Full MJML Support (v4.9.3)
• Full SASS Support (node-sass v6.0.0)
• With postcss and autoprefixer
• Browser-Sync for hot-reloading
• npm/yarn scripts for watch/build/serve

Usage

Clone the repo with:

git clone https://github.com/dstN/mjml-browsersync-boilerplate.git

Usage with Packagemanagers:

Open Terminal of your choice and type in:

yarn

or

npm install

Dev-Mode:

yarn serve

or

npm run serve

Just start typing your .mjml/.scss files and watch it live in the browser with hot-reload!

Build:

yarn build

or

npm run build

You can find everything you need in the dist/ folder.

Assets

Save images and other assets directly in the dist/ directory. Choose any name you wish for the directory or save them right inside the dist/ folder. I used only dist/images/.

SASS

You can make as many SASS-files as you wish, as long as you import them all inside the style.scss they get compiled.

SASS Extramode

There is also another script sass:uncompressed if you need the .css file uncompressed. It will get compiled to uncompressed/style.css.