How to Insert Raw HTML in Pug File (Not Include External HTML File)

How to insert raw HTML in Pug file (not include external HTML file)

Pug text can include HTML. Just force it as text, and it should parse:

html
    head

    body
        | <div><a href="lala"> blabla </a></div>

        p hihuhohoo

Also, you were using backslashes, not forward slashes, to close elements.

Include only partial .pug file? Is it not possible?

I think mixins could be what you're looking for. A mixin is made exactly for the purpose that you want: Including a piece of template code as an isolated snippet. A block on the other hand is made for template definitions. With blocks, you can define a template page, which other pages can inherit from and then append or replace those blocks. For your use case, you're probably better of with structuring the functionality using mixins, if you want isolated imports of a specific part of a common page.

Append pug compiled Content to pug template

I'm not sure what your broader goals are, but if you want to use a tag defined in your locals, you could set RowField: 'span' and then use tag interpolation:

#{rowdef.RowField} This is my span.

Which will render:

<span>This is my span.</span>

Can Webpack build multiple HTML files from SCSS and Pug?

You can use these packages (--save-dev for all):

• raw-loader to load the Pug files
• pug-html-loader to read the Pug files
• html-webpack-pug-plugin to generate HTML from Pug
• html-webpack-plugin (standard HTML plugin loader)

Then configure Webpack similar to the following, where index.js is a dummy file you should create if you don't already have an entry. Each Pug template you need to process is written in a separate HtmlWebpackPlugin object at the bottom.

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          "raw-loader",
          "pug-html-loader"
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/navcustom-template.pug',
      filename: 'navcustom-template.html'
    }),
    new HtmlWebpackPlugin({
      template: 'src/customfooter-template.pug',
      filename: 'customfooter-template.html'
    }),
    new HtmlWebpackPugPlugin()
  ]
}

All Pug mixins (your src/components files) will be included in the output. This example is tested and working.

---

Edit: To dynamically process all Pug files in the src directory use this config:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
const fs = require('fs');

let templates = [];
let dir = 'src';
let files = fs.readdirSync(dir);

files.forEach(file => {
  if (file.match(/\.pug$/)) {
    let filename = file.substring(0, file.length - 4);
    templates.push(
      new HtmlWebpackPlugin({
        template: dir + '/' + filename + '.pug',
        filename: filename + '.html'
      })
    );
  }
});

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          "raw-loader",
          "pug-html-loader"
        ]
      }
    ]
  },
  plugins: [
    ...templates,
    new HtmlWebpackPugPlugin()
  ]
}

This uses fs.readdirSync to get all Pug files in a directory. The synchronous version is used (as opposed to fs.readdir) because the module.exports function will return before the files are processed.

---

Related Topics