Stack Overflow
Stack Overflow

Questions tagged [pug-loader]

pug-loader is a webpack module used to compile Pug or Jade into HTML.

pug-loader is a webpack module used to compile Pug or Jade into HTML. This enables developers to use the simpler and less verbose Pug/Jade syntax to define their web pages, but still have the benefits of webpack dynamic packaging.

91 questions
2
votes
0 answers

Export to pug/jade instead of html

Is it possible to have webpack output to a jade/pug file instead of html? Every package i have found does the opposite, jade/pug -> html. Currently I just convert /dist/index.html to jade using html2jade.com after running npm run build, but i would…
nikarc
  • 138
  • 3
  • 11
2
votes
1 answer

using Pug with NodeJS and Webpack

I am trying to set up a basic Express application with Pug using Webpack. This is my file tree: build |-views |-index.pug |-app.js |-app.js.map server |-app.js package.json webpack.config.js app.js: const express =…
SmellydogCoding
  • 414
  • 8
  • 23
2
votes
1 answer

Webpack does not process pug files from template in controller

I recently updated an AngularJS (v1) project from Webpack v1 to v2 and TypeScript v1 to v2. The project uses pug files for generating the views, and prior to the upgrade there were no problems. Since the upgrade, pug files that are referred in a…
TSW
  • 61
  • 7
2
votes
2 answers

How do I require an image in Pug using Webpack

I have the following config for my pug files... { test: /\.pug$/, loaders: ["pug-html"] } This works great now I want to add an image that I load using url-loader. My structure is like this src ... thing thing.template.pug …
Jackie
  • 21,969
  • 32
  • 147
  • 289
1
vote
1 answer

Optional chaining to add a "data-attribute" on PugJS

I am looking for a solution to add "optional chaining" on PugJS to set data-active="true" if i === 0. Bellow is my current code. This code is working, but the problem with this approach (bellow) is that I have to repeat my code on a else statement…
Nuno Marques
  • 155
  • 1
  • 10
1
vote
1 answer

Webpack 4 and Pug not showing images

I'm having problems with my configuration of webpack and pug. Images are not displaying ( I got a 404 error ) This is: webpack.common.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const {…
Fede
  • 1,656
  • 4
  • 24
  • 42
1
vote
1 answer

How i can setting the home directory for Pug in Gulp

I am trying to set home directory for Pug to Galp using this code: function renderPug() { return src('app/pug/pages/**/*.pug') .pipe(pug({ pretty: true, basedir: __dirname, })) .pipe(dest('build')) .on('end',…
Semeon Boboshko
  • 21
  • 5
1
vote
0 answers

Grunt | Compile subfolders + including pug files

In this current situation grunt does watch the files in subfolder but there is no compilation to dist. See (part) of my gruntfile: grunt.initConfig({ pkg: grunt.file.readJSON('./package.json'), config: { dist:…
deinternetarchitect
  • 11
  • 3
1
vote
0 answers

PUG require image (webpack)

PUG require image (webpack) Problem with image processing in pug + webpack. Earlier in PUG, I don't process pictures via loader. I used WebpackCopyPlugin, and wrote absolute paths. Like that: - let imgPath = '/assets/img/' img(src=imgPath +…
Михаил Журавлёв
  • 13
  • 4
1
vote
1 answer

How import a JSON file with a data object inside in pug template using Grunt as task runner?

I have a JSON file with a object (name/code of font character), I wish import this in a Pug file, I'm using Grunt for task runner. { "brand": 61697, "podcast-x": 61698, "podcast": 61699, "play": 61700, "book": 61702, …
Bruno Wego
  • 2,099
  • 3
  • 21
  • 38
1
vote
1 answer

Minify HTML after Pug compilation with Laravel Mix

Could you help me with the html minification code in one line after laravel-mix-pug? My code is not working now and I don’t know what is the reason: let mix = require('laravel-mix'); mix.pug = require('laravel-mix-pug'); let pretty = true; if…
SET
  • 55
  • 7
1
vote
0 answers

Prevent webpack 4 pug loader from compiling mixin files

I'm really new to Webpack 4 and found a configuration issue I can not resolve. I'm configuring Webpack for a multi page application. HTML template engine is PUG. Files are compiled correctly, but when I create the bundle, Webpack is also compiling…
Barleby
  • 618
  • 2
  • 9
  • 20
1
vote
2 answers

Set pug includes to not compile

I am running the pug CLI with pug src --out web --watch If I have src/ index.pug includes/ scripts.pug web/ index.html (generated) And in index.pug: include includes/scripts.pug With this setup if I modify the scripts.pug, it…
tru7
  • 6,348
  • 5
  • 35
  • 59
1
vote
0 answers

Dynamically load needed images in pug + webpack

I have a pug mixin for review block. Adding review, I pass what image I wanna use as a profile avatar and so I need to load it on the fly. Let's simplify code to just loading an image. mixin image({src=""} = {}) .image - var imageSRC =…
SpekalsG3
  • 155
  • 1
  • 8
1
vote
1 answer

How to build (Webpack) the Node Js project using PUG Engine?

I am stuck to build the node js project using webpack and I am using pug engine for front end. My Project Structure: bin controller - csv.controller.js public - stylesheets - javascript - images routes - csv.route.js -…
Awadhesh Kumar
  • 380
  • 2
  • 4
  • 14
1 2
3
4 5 6 7