pug – 是否可以将Stylus插件与嵌入在Jade文件中的内联Stylus代码一起使用？

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

使用常规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和笔尖更有效地试验颜色：

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.

但出于维护原因,我宁愿留在翡翠的主要分支上.

解决方法

更新：

这是我发现的最佳方式：

另存为例如〜/斌/玉：

#!/usr/bin/env node

var jade = require('jade');

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

require('jade/bin/jade');

它将完全像/usr/local/bin / jade一样工作,除了它将使用你的代码编写手写笔,使用nib等.

老答案：

我建议你这样做：

var jade = require('jade');

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

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

你失去了jade命令行脚本,但你应该能够以这种方式编译你的文件,同时取决于jade master.

pug – 是否可以将Stylus插件与嵌入在Jade文件中的内联Stylus代码一起使用？

解决方法

相关文章