外部文件中的 Pug mixins 无法工作

Question

外部文件中的 Pug mixins 无法工作

9

我正在使用 Pug，并且想创建一些 mixin，以便在整个项目中创建可重用的组件。我想创建一些文件，将 mixin 分离和分类。当我想将包含 mixin 的文件包含到主文件中时，问题就出现了。例如：

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

这种方法不起作用（当我想要从另一个文件中包含混合时）。我得到了这个错误：jade_mixins.user_avatar 不是一个函数

但是当我在文件中包含混合时，它就能正常工作：

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')

有什么办法可以修复它？是的，路径是正确的。我使用"laravel-elixir-jade"这个包来编译pug，它是用于laravel的elixir的。

- El Danielo

不确定这是否是原因，但您是否尝试使用laravel-elixir-pug包？Jade已更名为Pug，也许在较新的包中有一些更改可以解决此问题... - gandreadis

实际上我已经尝试过了。我使用了laravel-elixir-pug包，并且配置完全相同（与包的描述一致），但它没有编译我的任何Pug代码。Gulp任务运行没有任何错误，但文件没有更新。就好像它找不到我的文件一样。 - El Danielo

我已经尝试在一个干净的设置下重现了这个问题，请见我的回答。 - gandreadis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gandreadis · Accepted Answer

我尝试重现您的问题，但在我的电脑上似乎工作得很好。我会列出我为此设置的环境，也许您可以找到与此不同的地方。

我的目录结构：

|- html/
|--- template.html (generated after running gulp)
|- node_modules/
|- views/
|--- mixins/
|----- util.pug
|--- template.pug
|- gulpfile.js
|- 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"
    }
}

我使用的template.pug文件:

body
    block content
        include mixins/util
        +test()

util.pug 文件：

mixin test()
    p Test

还有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'
        });
});

在根目录下运行gulp后，会生成如下所示的template.html文件，和预期一致：

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