LESS is not working in Express Js
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 ?
- Set the
srcforexpress.compilerto your public root path, not /styles (same asstatic) - 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)
})
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
I've published a package on GitHub called node-kickstart-example which uses a handy pre-configured express with enabled jade template rendering and less stylesheet processing. Use npm to install kickstart, place your jade templates in views/ and your less files in assets/styles/ and your good to go…
加载中,请稍侯......
精彩评论