LESS在Express Js中不起作用

问题描述

| 我正在尝试与Express 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。快速配置中有任何遗漏吗？

解决方法

将ѭ4的ѭ3设置为您的公共根目录路径，而不是/ styles（与ѭ5ame相同）编译后的文件将位于/styles/style.css 最好在存放静态文件的文件夹中放置一个public文件夹。如果您是从根用户提供服务，那么您将公开服务器源代码。

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)
})

, 较少中间件是更好的替代方案，效果很好。这样的代码应该可以解决问题：

var pub_dir = __dirname + \'/public\';

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

请注意，当您编写something.less时，如果您希望文件也最小化，则应该从HTML或something.min.css链接到something.css。默认情况下，每次文件更改时都会进行编译/缩小，但是您可以配置行为。请参阅不太中间件的文档以获取选项的完整列表： https://github.com/emberfeather/less.js-middleware , 我已经在GitHub上发布了一个名为node-kickstart-example的程序包，该程序包使用了方便的预配置express，并启用了jade模板渲染并减少了样式表处理。使用npm安装kickstart，将您的Jade模板放置在views/中，将较少的文件放置在assets/styles/中，这样您就可以开始了。

express js 不起作用不起作用