laravel 来自外部文件的 Pug mixin 不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41509548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 15:04:55  来源:igfitidea点击:

Pug mixins from external file not working

laravelpug

提问by El Danielo

I am working with Pug and I wanted to create some mixins to make some reusable components across whole project. I wanted to create some files just to make mixins separated and categorised. The problem occurs when I want to include file with mixins into my main file. For example:

我正在与 Pug 合作,我想创建一些 mixin 来在整个项目中制作一些可重用的组件。我想创建一些文件只是为了使 mixin 分离和分类。当我想将带有 mixin 的文件包含到我的主文件中时,就会出现问题。例如:

body
    block content
        include ./components/mixins/_mixins.pug
        +user_avatar('', '#', 'Daniel')

This does not work (when I want to include mixins from separate file). I got this error: jade_mixins.user_avatar is not a function

这不起作用(当我想从单独的文件中包含 mixin 时)。我收到此错误:jade_mixins.user_avatar is not a function

But when I include mixin in the file it works:

但是当我在文件中包含 mixin 时,它可以工作:

body
    block content
        mixin user_avatar(avatar_url, profile_url, name)
            .user(class='4u 6u(small) 12u(xsmall)')
                a(href=profile_url)
                    .user-avatar-thumbnail.is-active(style="background-image: url('" + avatar_url + "')")
                    if name
                        span.user-name=name
        +user_avatar('', '#', 'Daniel')

Any clue what to do to fix it? And yeah, the path is correct. To compile pug I use the laravel-elixir-jadepackage for laravel's elixir.

任何线索如何解决它?是的,路径是正确的。为了编译laravel-elixir-jadepug,我使用了laravel 的 elixir 包。

采纳答案by gandreadis

I've tried to reproduce your issue, but on my machine, it seems to work just fine. I'm listing the setup I made for this below, maybe you can find the point where yours deviates from this one.

我试图重现您的问题,但在我的机器上,它似乎工作得很好。我在下面列出了我为此所做的设置,也许您可​​以找到与此不同的点。

My directory structure:

我的目录结构:

|- html/
|--- template.html (generated after running gulp)
|- node_modules/
|- views/
|--- mixins/
|----- util.pug
|--- template.pug
|- gulpfile.js
|- package.json

My package.json:

我的package.json

{
    "name": "test",
    "version": "1.0.0",
    "main": "gulpfile.js",
    "license": "MIT",
    "dependencies": {
        "gulp": "^3.9.1",
        "laravel-elixir": "^6.0.0-15",
        "laravel-elixir-pug": "^1.3.2",
        "pug": "^2.0.0-beta6"
    }
}

My template.pug:

我的template.pug

body
    block content
        include mixins/util
        +test()

The util.pugfile:

util.pug文件:

mixin test()
    p Test

And the gulpfile.js:

gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-pug');

elixir(function (mix) {
    mix
        .pug({
            blade: false,
            src: './views',
            search: '**/*.pug',
            pugExtension: '.pug',
            dest: './html'
        });
});

After running gulpin the root directory, this produces the following template.html, as expected:

gulp根目录中运行后template.html,如预期的那样产生以下内容:

<body>
    <p>Test</p>
</body>