mjml-browsersync-boilerplate

MJML.io + Browser-Sync Boilerplate with hot reload, SASS Support and npm-scripts

Usage no npm install needed!

<script type="module">
  import mjmlBrowsersyncBoilerplate from 'https://cdn.skypack.dev/mjml-browsersync-boilerplate';
</script>

README

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 int the /src/ folder 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

Just put your assets in the folder src/assets. If you run build (npm run/yarn) it will copy all files from src/assets to dist/assets.

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.