将pug用于自包含微型小部件

问题描述

我已经开始使用pug 3来使用Node.js 13和Express 4.17（将Parcel用作捆绑器）用于Web项目。

我正在使用Pug模板（使用mixins）来开发可重用的（微型）小部件，以可视化许多网页上的内容。我的目标是这些小部件是独立的，因为它们包含一些（默认）样式CSS：

widget.pug

mixin widget(message)
    //- CSS
    style(type="text/css").
        .widget {
            font-weight: bold;
        }
    //- Template
    .widget
        != message

我使用这种方法来制作独立的小部件，这些小部件旨在嵌入iframe中的外部网页（单独的浏览上下文，其自己的CSS等）

然后，In开始研究将其应用于我自己的页面。但是，正如您将毫无疑问地看到的那样，此方法存在一个缺陷，即与我在同一页面上重复使用同一小部件​​一样，它会重复多次样式。不好。

有没有一种方法可以告诉pug仅包含一次样式，并在编译嵌入模板时将其提升到作用域的顶层？

我正在使用模板继承（extend _base）和包含（include widget.pug），其中基础模板具有脚本块：

base.pug

block styles

template.pug

extends base

include widget.pug

block append styles
    style(type="text/css").
        .bar {
            color: red;
        }

    .bar
        +widget("Hello")
        +widget("world")

在此示例中，呈现的HTML页面中的样式块将包含重复的CSS，这是不希望的。

这对于模板继承工作正常，但是我还没有找到一种方法（是否有？）来使所包含的小部件仅将小部件CSS的一个副本“发送”到base.pug中定义的样式部分？ / p>

干杯， 米歇尔

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）