Question

我想在Pug.js过滤器中绑定一些值。但是该过滤器工作正常，该值不会绑定。

带过滤器的输出结果

<style>.#{cs_1}{font-family:monospace !important;color:#a1292c !important}.#{cs_1}:hover{background-color:transparent !important;text-decoration:underline !important}.#{cs_2}{position:absolute;font-size:11px;text-transform:none;left:80px;top:12px;border-left:1px solid #ccc;padding-left:6px}.#{cs_3}{white-space:nowrap}</style>

没有过滤器的输出结果

<style>
    .eTWkI {
        font-family: monospace !important;
        color: #a1292c !important;
    }
    .eTWkI:hover {
        background-color: transparent !important;
        text-decoration: underline !important;
    }
    .Rzorr {
        position: absolute;
        font-size: 11px;
        text-transform: none;
        left: 80px;
        top: 12px;
        border-left: 1px solid #ccc;
        padding-left: 6px;
    }
    .vMvwp {
        white-space: nowrap; 
    }
</style>

Pug.js代码

注意：使用uglifycss模块
进行:minifycss过滤

- var length = 5
- var chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz_-"

- var cs_1 = utils.randomString(length, chars)
- var cs_2 = utils.randomString(length, chars)
- var cs_3 = utils.randomString(length, chars)

style
    :minifycss
        .#{cs_1} {
            font-family: monospace !important;
            color: #a1292c !important;
        }
        .#{cs_1}:hover {
            background-color: transparent !important;
            text-decoration: underline !important;
        }
        .#{cs_2} {
            position: absolute;
            font-size: 11px;
            text-transform: none;
            left: 80px;
            top: 12px;
            border-left: 1px solid #ccc;
            padding-left: 6px;
        }
        .#{cs_3} {
            white-space: nowrap; 
        }

所以过滤器看起来像是：

require('pug').filters = {

    minifycss: (text, options) => {
        if (!text) return;
        return uglifycss.processString(text, options);
    }

};

Answer 1

看起来Pug过滤器在编译时运行，并且不允许变量/动态内容。有关详细信息，请参阅this GitHub issue。您可以导出已编写的minifycss函数，然后在Jade中对其进行处理（如this related GitHub issue中所述），以使您的过滤器代码正常工作。您需要将require函数导出到Pug（路由中的locals.require = require），然后使用它来从其他位置请求minifycss函数。

然而，it also appears as though the above issue was fixed in Pug 2.0.0 beta11。根据您使用的Pug版本，可能是问题的原因。

如何在Pug.js过滤器中绑定值

1 个答案: