【问题标题】：Is it possible to use Stylus plugins with inline Stylus code embedded in a Jade file?是否可以在 Jade 文件中使用内嵌 Stylus 代码的 Stylus 插件？
【发布时间】：2012-09-05 00:10:52
【问题描述】：

我希望能够创建一个网页临时文件目录，其中每个文件都是一个独立的页面。

这对于普通的 HTML/CSS/JS 来说很容易：

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>lololol</p>
</body>

使用 Jade/Stylus/CoffeeScript 也同样简单：

head
    :stylus
        p
            color red
body
    p lololol

问题是，没有明确的方法可以以这种方式使用 Stylus 插件。具体来说，我想使用 colorspaces.js 和 nib 来更有效地试验颜色：

head
    :stylus
        @import 'nib'
        p
            color CIELCH(20.470, 74.265, 314.113)
            background-color linear-gradient(white, black)
body
    p lololol

我目前使用的解决方法

您可以通过更改 these lines 来分叉 Jade，如下所示：

  /**
   * Transform stylus to css, wrapped in style tags.
   */

  stylus: function(str, options){
+   colorspaces = require('colorspaces');
+   nib = require('nib');
    var ret;
    str = str.replace(/\\n/g, '\n');
    var stylus = require('stylus');
-   stylus(str, options).render(function(err, css){
+   stylus(str, options).use(colorspaces()).use(nib()).render(function(err, css){
      if (err) throw err;
      ret = css.replace(/\n/g, '\\n');
    });
    return '<style type="text/css">' + ret + '</style>'; 
  },

如果您安装 Jade 的依赖项（我必须安装 npm install commander 和 npm install mkdirp），您可以导航到 /jade_fork/bin/ 并执行 ./jade name_of_file.jade。

但出于维护原因，我更愿意留在 Jade 的主分支。

【问题讨论】：

标签： pug stylus

【解决方案1】：

更新：

这是我找到的最好方法：

另存为，例如~/bin/jade:

#!/usr/bin/env node

var jade = require('jade');

jade.filters.stylus = // your code from above

require('jade/bin/jade');

它将与/usr/local/bin/jade 完全一样工作，除了它将使用您的代码来编译手写笔，使用笔尖等。

旧答案：

我建议你这样做：

var jade = require('jade');

jade.filters.stylus = // your code from above

jade.compile( /* ... */ );

你失去了jade命令行脚本，但你应该能够以这种方式编译你的文件，同时依赖于jade master。

【讨论】：