Question

我正在尝试使用更少的快递js

var app = express.createServer();
var pub = __dirname + '/styles';
app.configure(function(){
    app.set("view engine", "html");
    app.register(".html", require("jqtpl").express);
    app.set('views', __dirname + '/views');
    app.set("view options", { layout: true });

    app.use(express.compiler({ src:pub, enable: ['less'] }));
    app.use("/styles", express.static(pub));
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
    app.use(express.bodyParser());
    app.use(app.router);
});

layout.html中的

<!DOCTYPE HTML>
<html>
    <head>
        <title>${title}</title>
        <link rel="stylesheet" href="/styles/style.less" type="text/css" media="screen" title="main css" charset="utf-8">
    <head>
    <body>
            <h1>Hello World!</h1>
        {{html body}}
    </body>
</html>

我的风格。

@color: #4D926F;
h1 {
    color:@color;
}

我可以调用http://localhost/styles/style.less，但它不是渲染CSS。

快速配置中的任何错过？

Answer 1

将src express.compiler设置为公共根路径，而不是/ styles（与static相同）
编译后的文件位于/styles/style.css

从一个public文件夹中提供静态文件也是一种好习惯。如果您从root服务，那么您将公开您的服务器源代码。

var app    = express.createServer()
  , public = __dirname + "/public"

app.configure(function(){
    app.set('view engine', "html")
    app.register('.html', require('jqtpl').express)
    app.set('views', __dirname + "/views")
    app.set('view options', { layout: true })

    app.use(express.compiler({ src:public, enable: ['less'] }))
    app.use(express.static(public))
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }))
    app.use(express.bodyParser())
    app.use(app.router)
})

Answer 2

较少的中间件是一个更好的选择，可以很好地工作。像这样的代码可以解决这个问题：

var pub_dir = __dirname + '/public';

app.use(require('less-middleware')({ src: pub_dir }));
app.use(express.static(pub_dir));

请注意，当你创作一些东西时，如果你想要缩小文件，你应该从你的HTML或something.min.css链接到something.css。默认情况下，每次文件更改时都会进行编译/缩小，但您可以配置行为。有关完整的选项列表，请参阅less-middleware文档： https://github.com/emberfeather/less.js-middleware

Answer 3

我发布了一个package on GitHub called node-kickstart-example，它使用了一个方便的预配置表达式，启用了jade模板渲染并减少了样式表处理。使用npm安装kickstart，将您的玉石模板放在views/中，将较少的文件放在assets/styles/中，然后您的好处就可以了......

LESS在Express Js中不起作用

3 个答案: