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

Question

我希望能够将我的数据对象传递到jade文件中，但是这似乎是不可能的。我的 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文件：

<span></span>

我的变量name没有通过。为什么？如何修复它？

- leshiple

Answer 1

你可以将自定义属性传递给 HtmlWebpackPlugin 选项，并在Pug模板中使用它们（请参阅文档中的htmlWebpackPlugin.options）。这适用于最新版本的 HtmlWebpackPlugin, pug-loader 和 webpack 2。无法确认它是否与旧版本兼容，但我认为是可以的。 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参考文档。

- edloidas

Answer 2

您应该使用pug-html-loader。

然后在webpack.config.js中：

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

然后在你的 Pug（Jade）文件中，使用这个数据。

 h3.title= data.name

- Roy