如何将变量从 jade-loader 传递到 jade 模板文件?

问题描述

我想将我的数据对象传递给玉文件，但这是不可能的我的jade-loader:

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

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

}

插件:

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

index.jade:

span=locals.name

我运行 webpack 并得到这个 index.html:

I run webpack and I get this index.html:

<span></span>

我的变量 name 没有通过.为什么?如何解决?

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

推荐答案

您可以将自定义属性传递给 HtmlWebpackPlugin 选项并在您的 pug 模板中使用它们(请参阅 htmlWebpackPlugin.options 在文档中).它适用于 HtmlWebpackPlugin、pug-loader 和 webpack 2 的最新版本.无法确认它适用于以前的版本，但我相信它适用.

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 规则:

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

HtmlWebpackPlugin 选项:

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

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

在 index.pug 模板中使用:

span= self.htmlWebpackPlugin.options.name

请注意，您可以将 self 选项设置为 false 并直接使用变量在 pug 模板中省略它.有关详细信息，请参阅 Pug 参考.

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.

这篇关于如何将变量从 jade-loader 传递到 jade 模板文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！