willyelm / pug-html-loader Goto Github PK

View Code? Open in Web Editor NEW

110.0 2.0 39.0 1.03 MB

Pug HTML loader for webpack

Home Page: https://github.com/willyelm/pug-html-loader

License: MIT License

JavaScript 100.00%

pug-html-loader's Introduction

Pug HTML loader for webpack

Installation

npm install pug-html-loader

Usage

In your sources:

var html = require('./file.pug')
// => returns file.pug content as html compiled string

In your webpack.config.js file:

module.exports = {
  // your config settings ...
  rules: [{
    // your modules...
    loaders: [{
      include: /\.pug/,
      loader: ['raw-loader', 'pug-html-loader'],
      options: {
        // options to pass to the compiler same as: https://pugjs.org/api/reference.html
        data: {} // set of data to pass to the pug render.
      }
    }]
  }]
};

Using it with html-loader

pug-html-loader encode to content to a string variable to avoid it and pass the string content to the loader chain please use the following configuration:

module.exports = {
  // your config settings ...
  module: [{
    // your modules...
    rules: [{
      test: /\.pug/,
      loaders: ['html-loader', 'pug-html-loader'],
      options: {
        // options to pass to the compiler same as: https://pugjs.org/api/reference.html
        data: {} // set of data to pass to the pug render.
      }
    }]
  }]
};

Don't forget to polyfill require if you want to use it in node. See webpack documentation.

License

MIT (http://www.opensource.org/licenses/mit-license.php)

pug-html-loader's People

Contributors

Stargazers

Watchers

pug-html-loader's Issues

Add support for loader-utils.interpolateName()

Hi,

I have a use-case which could be handled by invoking loader-utils.interpolateName(). In doing so, I could add something like the below to my webpack config:

options: {
    data: require('./src/pug/data/[name].json')
}

Module parse failed for all .pug files

Hi there,

I am getting the following error for every pug file after updating to v1.0.7. Downgrading to v1.0.5 fixed the issue.

ERROR in *.pug
Module parse failed: */node_modules/pug-html-loader/lib/index.js!*.pug Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp.raise (*/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected (*/node_modules/acorn/dist/acorn.js:1490:8)
    at Parser.pp.parseExprAtom (*/node_modules/acorn/dist/acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (*/node_modules/acorn/dist/acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (*/node_modules/acorn/dist/acorn.js:207:17)
    at Parser.pp.parseExprOps (*/node_modules/acorn/dist/acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (*/node_modules/acorn/dist/acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (*/node_modules/acorn/dist/acorn.js:112:19)
    at Parser.pp.parseExpression (*/node_modules/acorn/dist/acorn.js:88:19)
    at Parser.pp.parseStatement (*/node_modules/acorn/dist/acorn.js:1771:23)
 @ *.js 25:18-52

[Feature Request] Allow us to access the name of the current file from within the options

I want to be able to dynamically set the title of the page based on the filename. For example, index.pug should have "Website - Index" ("Website" will be the name of the overall site). When I render the templates normally using Express.js, I just pass in a title attribute for each render call. But when I am using Webpack config with pug-html-loader, I need to be able to tell the loader, in its options, that I want to pass in a title attribute for each file whose value is equal to the file's name. Just setting title: '[name]' does not work.

inheritance

When I modify the entry pug file the watcher works ok. But when I change the relative file (extends/include) then compiler does not recompile

Pug locals compilation

Hello, I have a problem. I need to compile and include another file passed by function.

// index.jade
// I'm using bemto
mixin foo()
  - var blockName = 'some-block' // simplified example
  +b.some-block
    != 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
})

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.

Passing locals

Please document this.

v1.1.1 puts a '|' in front of the HTML, causing errors in webpack

Here's a sample error message.

...-component.pug Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <div ...

Undoing this change made everything work for me locally: cca8eb1#diff-6d186b954a58d5bb740f73d84fe39073

Is there something else I need to do to make it work with v1.1.1?

For now, I rolled back to v1.1.0.

Using src=require() doesnt work

Just creating a new issue since this problem still exists but issue #6 is closed for some reason, and marked as duplicate though I cant see any other issues that it would be a duplicate of.

You should be able to do img(src=require('./path/to/file')) in your pug templates and have the require()d asset be run through webpacks loaders as expected

Use include ~components/foo.pug

how to use absolute path
example:
include ../../../components/foo.pug => include ~components/foo.pug

1.0.8 breaks html-loader chain

I noticed that with version 1.0.8's JSON.stringify when using html-loader after pug-html-loader it can't find any assets src because the quotes are escaped.

I haven't look into a way to go around it, but I'll leave this here for further investigation.

Cheers

Breaking changes in 1.1.1?

First - thanks for making/maintaining this!

Unfortunately my build broke when Travis pulled in v1.1.1 this morning. I'd consider unpublishing/deprecating and publishing as a major release.

Regardless, figured I'd post and close an issue here in case anyone else runs into the same problem. I just had to change my webpack.config.js from:

{
      test: /\.pug$/,
      loader: 'pug-html-loader',
      query: { doctype: 'html', plugins: ['pug-plugin-ng'] },
},

to:

{
      test: /\.pug$/,
      loader: ['raw-loader', 'pug-html-loader?doctype=html&plugins=pug-plugin-ng'],
 },

Does the pug-html-loader support to pass functions?

I wanna pass a function to pug, and using pug-html-loader to load pug,

in webpack.config.js

  {
    test:/\.pug$/,
    exclude: ['/node_modules/'],
    loader: 'pug-html-loader',
    query: {
      data: {bb:function(str){return str + '444';},aa:'666'},
      pretty: true
    }
  },

in pug file

p!= data.aa
p!= data.bb(data.aa)

use data.aa is OK, but get error when use data.bb

Html Webpack Plugin:
  Error: Child compilation failed:
  Module build failed: TypeError: data.bb is not a function




  - TypeError: data.bb is not a function

  - compiler.js:76 
    [resume]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:214 Compiler.
    [lib]/[webpack]/lib/Compiler.js:214:10

  - Compiler.js:403 
    [lib]/[webpack]/lib/Compiler.js:403:12

  - Tapable.js:67 Compiler.next
    [lib]/[webpack]/[tapable]/lib/Tapable.js:67:11

  - CachePlugin.js:40 Compiler.
    [lib]/[webpack]/lib/CachePlugin.js:40:4

  - Tapable.js:71 Compiler.applyPluginsAsync
    [lib]/[webpack]/[tapable]/lib/Tapable.js:71:13

  - Compiler.js:400 Compiler.
    [lib]/[webpack]/lib/Compiler.js:400:9

  - Compilation.js:577 Compilation.
    [lib]/[webpack]/lib/Compilation.js:577:13

  - Tapable.js:60 Compilation.applyPluginsAsync
    [lib]/[webpack]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:572 Compilation.
    [lib]/[webpack]/lib/Compilation.js:572:10

  - Tapable.js:60 Compilation.applyPluginsAsync
    [lib]/[webpack]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:567 Compilation.
    [lib]/[webpack]/lib/Compilation.js:567:9

  - Tapable.js:60 Compilation.applyPluginsAsync
    [lib]/[webpack]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:563 Compilation.
    [lib]/[webpack]/lib/Compilation.js:563:8

  - Tapable.js:60 Compilation.applyPluginsAsync
    [lib]/[webpack]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:525 Compilation.seal
    [lib]/[webpack]/lib/Compilation.js:525:7

and I already submit an issue to Html Webpack Plugin, link is jantimon/html-webpack-plugin#397

so I wanna know Does the pug-html-loader support to pass functions in query method ?

unexpected text "* nor" ——/* normalize component */

/* normalize component */

var component = normalizeComponent(
src_PriceModevue_type_script_lang_js_,
PriceModevue_type_template_id_5f5fa4f3_scoped_true_render,
PriceModevue_type_template_id_5f5fa4f3_scoped_true_staticRenderFns,
false,
null,
"5f5fa4f3",
null

)

→

ERROR in ./packages/unit/src/Unit.vue
Module build failed (from ./node_modules/pug-html-loader/lib/index.js):
Error: ******\packages\unit\src\Unit.vue:7:2
5|
6|

7| /* normalize component */
--------^
8| import normalizer from "!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
9| var component = normalizer(
10| script,

unexpected text "* nor"
at makeError (\node_modules\pug-lexer\node_modules\pug-error\index.js:32:13)
at Lexer.error (\node_modules\pug-lexer\index.js:59:15)
at Lexer.fail (\node_modules\pug-lexer\index.js:1445:10)
at Lexer.advance (\node_modules\pug-lexer\index.js:1505:15)
at Lexer.callLexerFunction (\node_modules\pug-lexer\index.js:1460:23)
at Lexer.getTokens (\node_modules\pug-lexer\index.js:1516:12)
at lex (\node_modules\pug-lexer\index.js:12:42)
at Object.lex (\node_modules\pug\lib\index.js:100:27)
at Function.loadString [as string] (\node_modules\pug-load\index.js:44:24)
at compileBody (\node_modules\pug\lib\index.js:86:18)
at Object.exports.compile (\node_modules\pug\lib\index.js:242:16)
at Object.module.exports (\node_modules\pug-html-loader\lib\index.js:30:22)

Use the new way to declare rules in Readme

Hi!
I recently was setting your loader in my app and I've found the Readme example to be a little old.
So I suggest to change it to something like this:

module: {
  rules: [

    {
      test: /\.pug/,
      use: [
        { loader: 'raw-loader' },
        { loader: 'pug-html-loader', options: {
           // options to pass to the compiler same as: https://pugjs.org/api/reference.html
           data: {}  // set of data to pass to the pug render.
        }
      ]
    },

  ],
},

Webpack Docs
Great loader by the way! 👍

attributes with sharp symbol

@willyelm I can not write sharp attribute.
e.g. #staticModal="bs-modal"
How I understand this loader does not support sharp attributes for pug. Does workaround exist for this case?

Error

Hello, I am getting this error, Cannot read property 'state' of undefined..
I followed the instructions on the page and rendering is working if I add it under rules instead of loaders, my webpack.common.js is a bit different, it does not say loaders: under modules: it says rules, if I change it to loaders it doesnt work at all, if I add loaders and add the loader there it does not work at all and it says I should add the loader, the thing is that when it renders the template it does not recognize the variable when I try to use it.

I am using https://github.com/AngularClass/angular2-webpack-starter and then just trying to add pug support to that. I am trying to transcribe the app.component.ts template into a pug template and running into that error, it does not recognize the variable.

require assets in pug file

My question is how can I import assets in pug template?
In my pug file I have something like this

img(src=require('./path/to/file'))

But it throws 'require is not a function' error.

Replace parseQuery() with getOptions()

I use webpack2.

module: {
    loaders: [
...
        test:   /\.(pug|jade)$/,
        loaders: [
          {
            loader: 'html-loader',
            options: {
              interpolate: true,
              attrs: 'img:src xlink:href source:src image:xlink:href',
            },
          },
          {
            loader: 'pug-html-loader',
            options: {
              exports: false,
              basedir: __dirname,
            },
          },
        ],
...
  ],
},

causes (node:91943) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

while

module: {
    loaders: [
...
        test:   /\.(pug|jade)$/,
        loaders: [
          'html?attrs=img:src xlink:href source:src image:xlink:href&interpolate',
          'pug-html?exports=false&basedir='+__dirname,
        ],
...
  ],
},

is ok

Can't access data inside pug file

Hello, i'm trying to import some data from pug-html-loader in this way

{
        test: /\.pug$/,
        exclude: ['/node_modules/'],
        use: ['html-loader', `pug-html-loader?${qs.stringify({
          options: {
            debug: !isProduction,
            pretty: true,
            data: {
              title: 'hello',
              home: require('./src/content/home.json')
            }
          }
        })}`]
      },

but when I try to access data inside pug file, for example:
p= data.title or p= data.home
nothing happen.

Anyone can help me?

Thank you so much

webpack2 support?

The samples still show a "loaders" config object, which webpack2 does not accept (according to my error messages...). Does this package support webpack2? Any chance for a working example? Thanks!

Mixins are not updating when using pug templates in Angular 2 and running webpack-dev-server

A starting point to reproduce the issue would be this starter repository:
https://github.com/jussikinnula/angular2-universal-wordpress

Simply just put a Pug mixin file into src/app/shared/templates -directory, as file src/app/shared/templates/test.pug for example this:

mixin test()
    h1 Testing

Then call the mixin for example from frontpage component's src/app/frontpage/frontpage.component.pug template:

include ../shared/templates/test.pug
.content-block
    h2 Front Page
    p There is no place like home.
    +test()

Then start running WebPack Development Server by giving command: npm run dev.

After the initial loading has completed, observe that +test() really gives the H1 heading "Testing". Then try to change it to something else. After observing that nothing changes, try to change src/app/frontpage/frontpage.component.pug H2 heading.

move from v1.1.0 to v1.1.1 broken

webpack throws error for each pug file with latest version v1.1.1:
Work perfectly if switched to v1.1.0

Error Log

 @ ./client/app/job/job-list/job-list.component.js 11:16-41./client/app/job/job-applicant/job-applicant.pug
Module parse failed: /home/yogesh/yogesum/hire/node_modules/pug-html-loader/lib/index.js!/home/yogesh/yogesum/hire/client/app/job/job-applicant/job-applicant.pug Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/yogesh/yogesum/hire/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/yogesh/yogesum/hire/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/home/yogesh/yogesum/hire/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/home/yogesh/yogesum/hire/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/yogesh/yogesum/hire/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/yogesh/yogesum/hire/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/home/yogesh/yogesum/hire/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/home/yogesh/yogesum/hire/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/yogesh/yogesum/hire/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/home/yogesh/yogesum/hire/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)

How to use css-loader(local scoped) with pug-html-loader?

how to use local scoped with pug-html-loader?

scss:

:local {
    .className {
        background: red;
        color: yellow;
    }
    .subClass {
        background: blue;
    }
}

bundle.js

...
/***/ }),
/* 21 */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin
module.exports = {"className":"style__className--5m3Hg","subClass":"style__subClass--Enq-v"};

/***/ }),
...

Stop pug-html-loader from emitting output bundle

I asked this on the file-loader github but perhaps its more related to pug-html-loader, so...

Im using file-loader in conjuction with pug-loader and require.context() to convert a folder of pug templates into separate html files. In my webpack.config.js i have these entry points:

entry: {
	'js/bundle.js': './js/.app.js',
	...
	'.delete': './pug/.pug.js' //the output bundle for this is unneeded
}

this references a .pug.js file that just has this in it:

// require all pug templates
var pugs = require.context('./', true, /\.pug$/)
pugs.keys().forEach(pugs)

and this is my loader for pug

{
	test: /\.pug$/,
	include: path.resolve(__dirname, "../pug"),
	use: [
		"file-loader?name=[path][name].html&context=./source/pug",
		{
			loader: "pug-html-loader",
			options: {
				pretty:true,
				exports:false,
				data: {foo:"BAR"}
			}
		}
	]
}

the issue is the entry point '.delete': './pug/.pug.js' creates an empty .delete file in my output directory, as well as all the html templates in the correct location.

is there any way i can stop the pug entry point from emitting an output bundle as well as the separate html files that it should be generating?

Cant' accesso tu htmlWebpackPlugins.options.title

Hello, I have a strange issue. In my pug files i not able to access to htmlWebpackPlugins.options.title. Is undefined, this is my configuration

{
        test: /\.pug$/,
        exclude: ['/node_modules/'],
        use: [
          'html-loader?attrs[]=img:src&attrs[]=video:src&attrs[]=source:src',
          {
            loader: 'pug-html-loader',
            query: {
              pretty: true,
              baseDir: path.resolve(__dirname, 'src/views'),
              data: {
                language: currentLang,
                global: require(`./src/content/${currentLang}/global.json`),
                home: require(`./src/content/${currentLang}/home.json`),
                about: require(`./src/content/${currentLang}/about.json`),
                services: require(`./src/content/${currentLang}/services.json`),
                careers: require(`./src/content/${currentLang}/careers.json`),
                journal: require(`./src/content/${currentLang}/journal.json`),
                news: require(`./src/content/${currentLang}/news.json`),
                contacts: require(`./src/content/${currentLang}/contacts.json`),
                articles
              }
            }
          }
        ]
      },

new HtmlWebpackPlugin({
      title: Testtttt!!!!!!,
      filename: 'index.html',
      template: './src/views/index.pug',
      minify: htmlMinifyOptions,
      cache: true,
    }),

Anyone can help me with this?
And I want to know if theres a way to get the current filename or folder name inside pug.

Thank you so much!

Cannot read property 'call' of undefined

If I try to use no existed mixin I'll get error:

ERROR in ./src/pages/about.pug (./node_modules/html-webpack-plugin/lib/loader.js!./src/pages/about.pug)
    Module build failed (from ./node_modules/pug-html-loader/lib/index.js):
    TypeError: Cannot read property 'call' of undefined

It looks like bug in loader. I think it would be better to get a clear error.

inline background-image (require)

Hi
How can i add background-image inline with require on my pug-file? I try style='background-image:url(' + require("./images/") + ')' but get error Module build failed: TypeError: require is not a function
My pug cfg:

{
	test: /\.pug/,
	loaders: ['html-loader', 'pug-html-loader']
}

pack. versions:

"pug-html-loader": "1.1.5"
"html-loader": "0.5.1"
"webpack": "3.5.5"

Thanks

Support "include" of other pug files.

Maybe this is already possible but I couldn't figure it out.
If not, this would be a welcome add-on.

Angular syntax not working

I'm having extreme difficulty to add pug in my angular project as syntax seems to cause a lot of problem

My pug file contains this:

button.btn.btn-primary([disabled]="isdisabled()", (click)="play()") Create Prospect

And with pug-html-loader, this leads to this:

<button _ngcontent-c7="" class="btn btn-primary">Create Prospect</button>

As you can see, my disabled and click angular attributes are gone.

Am I missing something?

My webpack 2 config (Rails 4.2)

module.exports = {
  test: /\.pug$/,
  use: [
    {
      loader: 'raw-loader',
    },
    {
      loader: 'pug-html-loader',
    },
  ],
};

My angular 6 component loads the template like this

template: require('./myfile.pug')

pug-html-loader 1.1.5

What am I missing here?

module.exports

I have issue with raw-loader, here is my config:

{
        test: /\.pug$/,
        loaders: ['raw-loader', 'pug-html-loader']
      }

then I require file

let template = require('./templ.pug')

template is a string with module.exports = "..." but I want raw html

Variable interpolation not working

My templates are rendering but they can't see the variables in my component, what am I doing wrong? :/

main
  h1 Hello from Angular App with Webpack #{title}
  div.someButton
    button(md-raised-button) Basic Button

import { Component } from '@angular/core';
import '../../public/css/styles.css';

@Component({
  selector: 'mep-fe',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  public title = 'Some Title';
}

How is this loader different than pug-loader?

What's the difference between this loader and this one?

Webpack build fails with newest loader version

Hi.
I experience some problems with last loader version:

ERROR in ./src/HwrBundle/Resources/assets/templates/stats/item.pug
Module parse failed: /tmp/BotApp/node_modules/pug-html-loader/lib/index.js!/tmp/BotApp/src/HwrBundle/Resources/assets/templates/stats/item.pug Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/tmp/BotApp/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/tmp/BotApp/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/tmp/BotApp/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/tmp/BotApp/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/tmp/BotApp/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/tmp/BotApp/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/tmp/BotApp/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/tmp/BotApp/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/tmp/BotApp/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/tmp/BotApp/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/tmp/BotApp/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /tmp/BotApp/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/tmp/BotApp/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/tmp/BotApp/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /tmp/BotApp/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/tmp/BotApp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /tmp/BotApp/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:415:3)

1.1.0 works fine.

I suppose the reason is here:
cca8eb1
Thank you.

Not compiling using new pug syntax

This only happens when I try to capture the index a in this case

Require a css file?

Is it possible to do something like the following?

link(href=require("./index.css"))

Error: Template parse errors: Can't bind to 'routerlink' since it isn't a known property of 'a'.

Trying to use the loader with Angular + webpack2, got it working but I cannot create anchor links as such:

a('[routerlink]'=` "['./']" , routerlinkactive='active')
    | Index
a('[routerlink]'= "['./home']" , routerlinkactive='active')
    | Home

Template parse errors:
↵Can't bind to 'routerlink' since it isn't a known property of 'a'. 
("<nav><a [ERROR ->][routerlink]="['./']" routerlinkactive="active">Index</a><a [routerlink]="['./home']" routerlinkactiv"): AppComponent@0:8
↵Can't bind to 'routerlink' since it isn't a known property of 'a'. 
("<nav><a [routerlink]="['./']" routerlinkactive="active">Index</a><a [ERROR ->][routerlink]="['./home']" routerlinkactive="active">Home</a></nav><main><router-outlet></router-outle"): AppComponent@0:68"

How to pass data when loader is used inline

Hi,
I'm not very comfortable with Webpack but I just can't use the pug-html-loader correctly in an import statement (cf.: https://webpack.js.org/concepts/loaders/#inline). The root option works well but I don't know how to pass the data option :/

example: import HTML from 'html-loader!pug-html-loader?root=my_path&data[myvar]=myvalue!./file.pug

Can someone help me to achieve it please?

Thank you,
Xavier.

script( src=`js/${hash}.js` )

this also ties in to #23 - i cant seem to pass locals to the pug templates at all

pug-html-loader !== jade-html-loader

The project has the following structure -

index.pug

html(lang="en")
head
    meta(charset="UTF-8")
    title Document
body
    include ./title.pug

title.pug

h1 so good

The pug-html-loader compiled in -

module.exports = "<!DOCTYPE js><html lang=\"en\"></html><head><meta charset=\"UTF-8\"/><title>Document</title></head><body><h1>so good</h1></body>";

And I need to .html, as if I was compiling with the help of jade-html-loader.

It is possible such to implement using pug-html-loader? And I don't want a lot of files to rename .pug on .jade :)

willyelm / pug-html-loader Goto Github PK

pug-html-loader's Introduction

Pug HTML loader for webpack

Installation

Usage

Using it with html-loader

License

pug-html-loader's People

Contributors

Stargazers

Watchers

Forkers

pug-html-loader's Issues

how to use local scoped with pug-html-loader?

scss:

bundle.js

Recommend Projects

Recommend Topics

Recommend Org