Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

“include” correctly imports content, but “extends/block” yields no content or errors #117

Open
adebigare opened this issue Jan 6, 2019 · 1 comment

Comments

@adebigare
Copy link

First, please forgive me for being a newb and let me know what I can improve to help clarify this issue.

I'm using Pug 2, Webpack 4

tl:dr; Everything is working as expected, except pug's extends/block functionality. The same content can be successfully imported using include, but as soon as the call is changed to a block, the partial is no longer registered in webpack's CLI log (forgive my lack of jargon knowledge here), and no content is rendered to the page.

This is the case whether the partial is in the same directory or in a child directory of index.pug.

(I also have a SO post up, but after playing around more I'm almost certain this is related to the loader.)

Ok, so...

I have a folder structure like:

  • src
    • webpackConfig.js
    • html
      • index.pug
      • partials
        • some-partial.pug

webpackConfig.js (excerpt)

    module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src', 'index.js'),
    },

    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            title: 'Site',
            template: 'src/html/index.pug',
            inject: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
    ], 
    output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].bundle.js'
    },
    module {
      rules: [{
                test: /\.pug$/,
                use: [{
                    loader: 'pug-loader',
                    options: {
                        pretty: true,
                    }
                }]
            }]
    }

index.pug

    include partials/header
    block some-partial

partials/some-partial.pug

    extends /../../index.pug
    block some-partial
      p I'm some text.
  • Note here: I've tried several versions of the index.pug directory format, both with some-partial.pug in the same directory and child, to no avail.
@ReyesRichard
Copy link

Apparently the "extend" function does not work, I have been trying but I still can't make it work with the "blocks", someone knows how to use it in this way, for now I'm using mixin in a provisional way

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants