https://github.com/ramasilveyra/mjml-loader

MJML loader for webpack
https://github.com/ramasilveyra/mjml-loader

mjml webpack webpack-loader

Last synced: 2 months ago
JSON representation

MJML loader for webpack

• Host: GitHub
• URL: https://github.com/ramasilveyra/mjml-loader
• Owner: ramasilveyra
• License: mit
• Created: 2016-07-23T12:18:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-05-10T11:17:15.000Z (over 5 years ago)
• Last Synced: 2024-10-31T17:29:35.223Z (3 months ago)
• Topics: mjml, webpack, webpack-loader
• Language: JavaScript
• Homepage:
• Size: 65.4 KB
• Stars: 27
• Watchers: 3
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        





  

    

  

  

    

  

  

    

  



MJML loader for webpack


Converts MJML files to HTML and exports them as string.


Table of Contents


- [Install](#install)

- [Usage](#usage)

- [Examples](#examples)

- [Contribute](#contribute)

- [License](#license)

Install


**Node.js v6.5 or newer** is required.

**webpack 2 or newer** is required.

Via the yarn client:

```bash

$ yarn add --dev mjml-loader webpack

```

Via the npm client:

```bash

$ npm install --save-dev mjml-loader webpack

```

Usage


[Look into the official webpack loaders usage documentation](https://webpack.js.org/concepts/loaders/#using-loaders).

At this moment this loader has no options.

Examples


### Compile MJML file to HTML file

For transforming a MJML file to a HTML file is better to use [`mjml cli`](https://www.npmjs.com/package/mjml-cli) or [`gulp-mjml`](https://www.npmjs.com/package/gulp-mjml).

### Inline the MJML result (HTML) into bundle

With this configuration:

```javascript

{

  // ...

  module: {

    rules: [

      { test: /\.mjml$/, loader: 'mjml-loader' }

    ]

  }

  // ...

}

```

With this MJML file:

`template.mjml`

```xml

 

  

    

      

        

          Hello World!

        

      

    

  

```

This entry point:

`index.js`

```javascript

import template from './template.mjml';

console.log(template);

```

The console output will be:

```html

  #outlook a { padding: 0; }

  .ReadMsgBody { width: 100%; }

  .ExternalClass { width: 100%; }

  .ExternalClass * { line-height:100%; }

  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }

  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }

  p { display: block; margin: 13px 0; }

  @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

  @media only screen and (max-width:480px) {

    @-ms-viewport { width:320px; }

    @viewport { width:320px; }

  }

  @media only screen and (min-width:480px) {

    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }

  }

  


Hello World!

      




```

Contribute


Feel free to dive in! [Open an issue](https://github.com/ramasilveyra/mjml-loader/issues/new) or submit PRs.

mjml-loader follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.

License


[MIT © Ramiro Silveyra d'Avila](LICENSE.md)