Hello World!

Very simple web app to demonstrate how to easy include resources in Pug, using the pug-plugin.

Use an image source file in Pug with the @images webpack alias:

img(src='@images/delphin.jpeg')

Generated HTML:

<img src="assets/img/delphin.f78b30f4.jpeg">

Use a font source file or background image in SCSS:

@font-face {
  font-family: 'GlyphIcons';
  src: url('@fonts/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2');
}
.header-bg {
  background-image: url('@images/header-bg.png');
}

Generated CSS:

@font-face {
  font-family: 'GlyphIcons';
  src: url(assets/fonts/glyphicons-halflings-regular.woff2) format("woff2");
}
.header-bg {
  background-image: url(assets/img/header-bg.30f4f78b.png);
}

Supports the inline SVG in HTML.
Pug:

img.logo(src='@images/webpack.svg')

Generated HTML:

<svg viewBox="0 0 200 200" class="logo">
  <path d="m600 0 530.3 300v600l-530.3 300-530.3-300v-600z" fill="#fff"></path>
  ...
</svg>

Supports the inline images as data-URL in HTML.
Pug:

img(src='@images/icons/Premium.png')

Generated HTML:

<img src="data:image/png;base64,iVBORw0K...ABJRU5ErkJggg==">

Supports the inline SVG as data-URL in CSS.
SCSS:

.webicon-mac-svg {
  background-image: url('@images/icons/webicons/webicon-mac.svg');
}

Generated CSS:

.webicon-mac-svg {
  background-image: url("data:image/svg+xml,<svg>...</svg>");
}

Supports the inline images as data-URL in CSS.
SCSS:

.webicon-apple-png {
  background-image: url('@images/icons/webicons/webicon-apple.png');
}

Generated CSS:

.webicon-apple-png {
  background-image: url(data:image/png;base64,iVBORw0K...ABJRU5ErkJggg==);
}

Hello World!

Icons as background image in CSS