Pug.jsフィルタ内の値をバインドする方法

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コード

ありませんE：: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; 
     } 

だからフィルターがどのように見えるuglifycssモジュールを作った：パグフィルターはコンパイル時に実行され、およびすることができませんように見えます

require('pug').filters = { 

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

}; 

Answer 1

可変/動的コンテンツ。詳細はthis GitHub issueを参照してください。あなたが書いたminifycss関数をエクスポートして、フィルターコードを動作させるために、それを翡翠内で要求する（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のバージョンによっては、それが問題の原因かもしれません。