来自外部文件的 Pug mixins 不起作用答案

【问题标题】：Pug mixins from external file not working来自外部文件的 Pug mixins 不起作用
【发布时间】：2017-01-08 16:50:52
【问题描述】：

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

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

这不起作用（当我想从单独的文件中包含 mixin 时）。我收到了这个错误：jade_mixins.user_avatar is not a function

但是当我在文件中包含 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')

有什么办法可以修复它吗？是的，路径是正确的。为了编译 pug，我使用 laravel-elixir-jade 包作为 laravel 的长生不老药。

【问题讨论】：

不确定这是否是原因，但您是否尝试过使用laravel-elixir-pug 包？ Jade 已重命名为 Pug，也许更新的软件包中有一些更改可以解决此问题...
其实我试过了。我使用了具有完全相同配置的laravel-elixir-pug 包（对包的描述有效），它没有编译我的任何哈巴狗代码。 Gulp 任务运行没有任何错误，但文件没有更新。就像它找不到我的文件一样。
我试图在干净的设置上重现该问题，请参阅下面的答案

标签： laravel pug

【解决方案1】：

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

我的目录结构：

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

【讨论】：

您的代码是正确的。我设法让它工作。将包装更改为哈巴狗就可以了。它对我不起作用的原因是代码在我将包更改为 pug 时过时了，并且在运行 gulp 任务时我没有看到任何错误，我在创建观察者时看到了它们，然后任务停止了一个错误。现在它运行完美。
啊，好的，很高兴听到它有帮助！