1

I have a problem with Pug and Webpack 2. I need to compile and include another file passed by function.

//- index.jade
//- I'm using bemto
mixin foo()
  //- simplified example
  - var blockName = 'some-block'
  +b.some-block
    != getBlock(blockName)
    //- same bad result
    //- != htmlWebpackPlugin.options.getBlock(blockName)
+foo()

//- some-block.pug
+e.element Some text

// webpack.config.js
use: [
  'html-loader', // without it shows an error
  {
    loader: "pug-html-loader",
    options: {
      data: {
        getBlock: function(blockName) {
          return fs.readFileSync(`${blockName}.pug`, { encoding: 'utf8' });
        },
      }
    }
  }
]
new HtmlWebpackPlugin({
  filename: index.html,
  template: index.pug,
  // same bad result
  // getBlock: function(blockName) {
  // return fs.readFileSync(`${blockName}.pug`, { encoding: 'utf8' });
  // },
})

What I get:

// index.html
<div class="some-block">+e.element Some text</div>

What I need :

// index.html
<div class="some-block">
  <div class="some-block__element">Some text</div>
</div>

Is this possible? I would be grateful if you help.

Graham
  • 7,431
  • 18
  • 59
  • 84
Spark89
  • 11
  • 3

0 Answers0