LESS 在 Express Js 中不起作用

发布于 2024-11-16 07:05:35 字数 1217 浏览 2 评论 0原文

我正在尝试

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>

使用less和express js我的style.less是

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

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

快速配置有遗漏吗？

原文

I'm trying to use less with 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);
});

in 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>

My style.less is

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

I can call http://localhost/styles/style.less but it is not render CSS.

Any miss in express configure ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彼岸花似海 2024-11-23 07:05:36

less-middleware 是一个更好的替代方案，效果很好。像这样的代码应该可以解决问题：

var pub_dir = __dirname + '/public';

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

请注意，当您编写 some.less 时，如果您希望文件也被缩小，您实际上应该从 HTML 链接到 some.css 或 some.min.css 。默认情况下，每次文件更改时都会发生编译/缩小，但您可以配置行为。请参阅 less-middleware 文档以获取完整的选项列表：
https://github.com/emberfeather/less.js-middleware

less-middleware is a better alternative that works beautifully. A code like this should do the trick:

var pub_dir = __dirname + '/public';

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

Please note that when you author something.less you should actually link to something.css from your HTML or something.min.css if you want the file to also be minified. By default compilation/minification happens every time file changes, but you can configure the behavior. Please refer to less-middleware documentation for full list of options:
https://github.com/emberfeather/less.js-middleware

回复收藏 0 原文

ゝ杯具 2024-11-23 07:05:36

我在 GitHub 上发布了一个名为 node-kickstart-example 的包，它使用了一个方便的 pre -配置了express，启用了jade模板渲染和更少的样式表处理。使用npm安装kickstart，将你的jade模板放在views/中并assets/styles/ 中的 less 文件就可以了……

回复收藏 0 原文

抚笙 2024-11-23 07:05:35

将 express.compiler 的 src 设置为您的公共根路径，而不是 /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)
})

Set the src for express.compiler to your public root path, not /styles (same as static)
The compiled file will be at /styles/style.css

It's also good practice to have a public folder from where to serve static files. If you serve from root you're exposing your server source code.

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

回复收藏 0 原文

~没有更多了~