Node.js + Express.js. 如何渲染较少的 CSS？

Question

我无法在我的Express工作空间中渲染Less CSS。
这是我的当前配置（我的CSS / Less文件位于'public/stylo/'中）:

app.configure(function()
{
    app.set('views'      , __dirname + '/views'         );
    app.set('partials'   , __dirname + '/views/partials');
    app.set('view engine', 'jade'                       );
    app.use(express.bodyDecoder()   );
    app.use(express.methodOverride());
    app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']}));
    app.use(app.router);
    app.use(express.staticProvider(__dirname + '/public'));
});

这是我的main.jade文件：

!!!
html(lang="en")
     head
         title Yea a title
         link(rel="stylesheet", type="text/css", href="/stylo/main.less")
         link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif")
         script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js")
         script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js")
     body!= body

这是我的main.less CSS：

@import "goodies.css";

body 
{
    .googleFont;
    background-color     :  #000000;
    padding              :  20px;
    margin               :  0px;

    > .header
    {
        border-bottom    :  1px solid #BBB;
        background-color :  #f0f0f0;
        margin           :  -25px -25px 30px -25px; /* important */
        color            :  #333;
        padding          :  15px;
        font-size        :  18pt;
    }
}

这是我的 goodies.less css：

.rounded_corners(@radius: 10px)
{    
    -moz-border-radius   :  @radius;
    -webkit-border-radius:  @radius;
    border-radius        :  @radius;
}
.shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999)
{
    -webkit-box-shadow   :  @rad1 @rad2 @rad3 @color;
    -moz-box-shadow      :  @rad1 @rad2 @rad3 @color;
    box-shadow           :  @rad1 @rad2 @rad3 @color;
}
.gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec)
{
    background-image     :  -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2));
    background-image     :  -moz-linear-gradient(@color1, @color2);
}
.googleFont
{
    font-family          :  'Droid Serif';
}

很好。现在：我已经通过npm安装了less，从另一个帖子上得知@imports应该引用.css而不是.less。无论如何，我尝试了在jade和less文件中切换.less为.css的组合，但没有成功。

如果您能提供帮助或解决方案，我将非常感激。

注意：如果我输入任何旧的.css，jade部分就可以正常工作。
注意2：如果我使用命令行lessc编译，则less会编译。

- Paden

Answer 1

天啊，这些东西在路径使用上非常不一致，但我找到了如何让它们工作的方法。

首先是路径问题，compiler和staticProvider都需要使用/public，并将与该目录下的所有请求关联。如果不这样做，编译器将尝试使用像/public/stylo/stylo这样的路径。

第二个问题是与main.less文件中的@import以及less编译器无法处理相对导入相关的。

在main.less中使用@import "/public/stylo/goodies.css";将使其正常工作。

关于相对路径问题，已经向less提交了错误报告：
https://github.com/cloudhead/less.js/issues/issue/177

- Ivo Wetzel

---

谢谢！我将编译器更改为"app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));"，但是当HTML/Jade指向一个.less文件时，它不会将其解释为.css文件。有什么建议吗？ - Paden

啊，终于搞定了！我的jade文件必须指向一个.css文件，然后less相关的内容就会被编译！感谢你的帮助！！:D - Paden

还有一件事，@import 不应该有扩展名。所以： "@import "/public/stylo/goodies";" - Paden

既然你已经让它工作了，有没有办法传递一个参数给express.compiler()，使输出被压缩？类似于以下代码：parser.parse('.class { width: 1 + 1 }', function (e, tree) { tree.toCSS({ compress: true }); // 压缩CSS输出 }) - tester

Express 3.0.0现在包含了一种不同的中间件来编译LESS。原始的compiler中间件已经从Connect中删除，而Express是基于Connect的。新的中间件是less-middleware，工作方式与旧的中间件基本相同，但包括诸如压缩CSS输出之类的内容。 - Gregory Bell

Answer 2

如果你想要压缩输出的CSS，我发现内置的编译器（来自connect模块）缺少压缩选项。所以我没有编写自己的中间件编译器，而是在我的应用程序中重写了connect less编译器。

var express = require('express');
var app = express.createServer();
var less;

express.compiler.compilers.less.compile = function (str, fn) {
    if (!less) less = require("less");                                                      
    try {
        less.render(str, { compress : true }, fn);
    } catch (err) {
        fn(err);
    }
};

app.use(express.compiler({ src: publicdir, enable: ['less'] }));

- Matt Sain

Answer 3

问题在于编译器只有在文件的修改时间改变时才会编译该文件。

假设你有：

// A.less
@import "B.css";

并且

// B.less
body {
  background: #f00;
}

我现在修改了B.less，A不会重新编译！

我有一个等待数月的拉取请求，你可以使用我的分支编译器而不是主分支。

https://github.com/senchalabs/connect/pull/167

- masylum

---

谢谢你的见解！那个 bug 真是太可怕了。我会记住这个问题，但我的 "a.less" 文件在任何请求中都无法编译。 - Paden

我刚刚测试了一下，你是正确的。哇！那真的很糟糕！ - Paden

导入通常会影响性能，因此应该避免使用。我认为这个错误可能是由于违反了最佳实践而导致的 :-)。 参考资料: https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ - Clint

Answer 4

两个能让你的生活更轻松的项目

1. Buildr：(Java|Coffee)Script 和 (CSS|Less) 的构建器、打包工具、压缩器、合并器和检查器

2. Less4Clients：Express.js 扩展，用于服务器端渲染 LessCSS (.less) 文件 :)

- balupton

Answer 5

我在 GitHub 上发布了一个名为 node-kickstart-example 的包，其中使用了一个方便的预配置 express 并启用 jade 模板渲染和 less 样式表处理。使用 npm 安装 kickstart，将您的 jade 模板放置在 views/ 中，您的 less 文件放置在 assets/styles/ 中，然后您就可以开始使用了...

Matt Sain 的解决方案用于生成压缩的 CSS 文件，其中包含在 kickstart 中。

- sbstjn