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

Question

我想将我的数据对象传递给 Jade 文件，但这是不可能的
我的 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

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

<span></span>

我的变量 name不要通过。为什么？如何解决？

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 reference .