Make variable accessible in all pug files

Question

Using pug-loader how can I make some vairable accessible to all pug/jade files. For example in express app I could do:

app.locals.assetPath = path.resolve('public/assets');

and the variable assetPath would be available in all jade files. But with webpack I am not able to do the same.

In my webpack.config.js I tried following but could not get work:

{
  test: /.pug$/,
  loader: 'pug',
  query: {
    root: path.join(__dirname, 'src/app'),

    /*globals: {assetPath: '/hard/coded/value'}*/ //WILL NOT WORK

    /*locals: {assetPath: '/hard/coded/value'}*/ //WILL NOT WORK

    /*locals: {assetPath: '/hard/coded/value'}, globals: ['assetPath']*/ //WILL NOT WORK
  }

If I'm reading the source right, you need to extend pug-loader to support what you want. You could open an issue at the repo and see what they say. — Juho Vepsäläinen, Aug 17 '16 at 02:50
Opened a github issue [here](https://github.com/pugjs/pug-loader/issues/57) — Lekhnath, Aug 17 '16 at 05:34

score 4 · Answer 1 · edited May 23 '17 at 12:31

From my experience, you have two options:

use pug-html-loader instead;
if you are using HtmlWebpackPlugin plugin, add custom properties to its config. They will be accessible through all pug templates.

Please, take a look at the detailed answer concerning the second and the first options.

Here is also the configuration example for the second option:

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:
  production: (process.env.NODE_ENV === 'production')
}

index.pug template:

- const production = self.htmlWebpackPlugin.options.production

if production
  link( rel="stylesheet", type="text/css", href="style.css" )

Make variable accessible in all pug files

1 Answers1