How to pass variable from jade-loader to a jade template file?

Question

I want to pass my data-object to jade files, but but it is impossible My jade-loader:

{
   test: /\.jade$/,
   loader: "jade",
   query: {
      pretty: true,
      locals: {
          name: "Georg"
    }
}

}

plugins:

plugins: [
    new HtmlWebpackPlugin({
       filename: "index.html",
       template: "./src/jade/index.jade"
})]

index.jade:

span=locals.name

I run webpack and I get this index.html:

<span></span>

My variable name don't pass. Why? How to fix it?

Answer 1

You can pass the custom properties to HtmlWebpackPlugin options and use them in your pug templates (see htmlWebpackPlugin.options in documentation). It works with the latest versions of the HtmlWebpackPlugin, pug-loader and webpack 2. Can't confirm that it works with the previous versions, but I believe it does.

pug rule:

{
  test: /\.pug$/,
  loader: 'pug-loader',
  options: {
    // Use `self` namespace to hold the locals
    // Not really necessary
    self: true,
  },
}

HtmlWebpackPlugin options:

{
  filename: 'index.html',
  template: 'src/html/index.pug',

  // Your custom variables:
  name: 'Georg',
}

Using it in index.pug template:

span= self.htmlWebpackPlugin.options.name

Note that you can set the self option to false and omit it in your pug templates using variables directly. For more details see the Pug reference.

Answer 2

you should use pug-html-loader

then in webpack.config.js

  ...
  {
    test:/\.pug$/,
    exclude: ['/node_modules/'],
    loader: 'pug-html-loader',
    query: {
      data: {name:'test'},
      pretty: true
    }
  },
  ...

then in your pug(jade) files, use this data

 h3.title= data.name