LESS не работает в Express Js - PullRequest
Новая
       13

LESS не работает в Express Js

2 голосов
/ 18 июня 2011

Я пытаюсь использовать меньше с экспресс 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>

Мой style.less это 

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

IМожно вызвать http://localhost/styles/style.less, но это не рендеринг CSS.

Любые ошибки в экспресс-конфигурации?

Ответы [ 3 ]

5 голосов
/ 18 июня 2011
  1. Установите src для express.compiler для вашего общего корневого пути, а не / styles (так же, как static)
  2. Скомпилированный файл будет находиться по адресу /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)
})
3 голосов
/ 22 апреля 2012

менее промежуточное программное обеспечение - лучшая альтернатива, которая прекрасно работает. Такой код должен сработать: 

var pub_dir = __dirname + '/public';

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

Обратите внимание, что когда вы создаете что-то .less, вы должны на самом деле ссылаться на что-то .css из своего HTML или что-то.min.css, если вы хотите, чтобы файл также был уменьшен. По умолчанию компиляция / минимизация происходит каждый раз, когда файл изменяется, но вы можете настроить поведение. Пожалуйста, обратитесь к документации по промежуточному программному обеспечению для получения полного списка опций: https://github.com/emberfeather/less.js-middleware

0 голосов
/ 17 декабря 2011

Я опубликовал пакет на GitHub под названием node-kickstart-example , в котором используется удобный предварительно сконфигурированный экспресс с включенным рендерингом нефритовых шаблонов и меньшей обработкой таблиц стилей. Используйте npm для установки kickstart , поместите ваши шаблоны Jade в views/ и ваши меньшие файлы в assets/styles/ и все готово к работе…

...