node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


Haml Loader for Webpack

Import "static" Haml files as modules in your webpack project. Returns a rendered template.

This is a fork of Haml-Coffee (Hamlc) Loader for Webpack.


Add to your webpack config module.loaders:

{ test: /\.html\.haml$/, loader: "haml-haml" }

Rendering templates


  %h1 {{ title }}



will return the HTML:

<div class="template">
  <h1>{{ title }}</h1>

Can I embed JavaScript in my Haml?

In theory yes, but at the moment it likely isn't wired up right; this is just a way to convert "static" Haml into HTML in a webpack loader.

Why the fork?

The haml-loader module uses haml-coffee, which doesn't understand Haml syntax as well as the haml module. For instance, for an Angular template, it seems to interpret %p {{ content }} as %p{{ content }} -- that is, it pretty much just blows up, (apparently) seeing the first curly brace as Haml's older attribute specifier syntax.


haml-haml-loader can be nicely chained with ngtemplate-loader

{ test: /\.html\.haml$/, loaders: ['ngtemplate?relativeTo=assets/javascripts', 'haml-haml'] },