Express.js + Less: как правильно настроить

Это решение работает только для Express 2.x.

Я нашел решение, надеюсь, это кому-то поможет:

1. меньше или меньше промежуточного программного обеспечения

Я использую меньше, потому что прочитал, что это официальный порт. Но не уверен, в чем разница, поскольку документации нет.

2. структура каталогов:

Ваша структура каталогов не имеет значения. Но настоятельно рекомендуется иметь общую папку, которая обслуживает все статическое содержимое, такое как файлы JavaScript,, Less, CSS или изображения.

3. Конфигурация приложения:

Чтобы меньше работало должным образом, вам нужны две особые вещи:

Во-первых, компилятор, который компилирует файлы less:

    app.use(express.compiler({ src : __dirname + '/public', enable: ['less']}));

А во-вторых, покажите, где найти статические файлы!

    app.use(express.static(__dirname + '/public'));

Оба должны указывать на вашу общую папку!

4. HTML

    <link rel="stylesheet" href="/styles/bootstrap.css">

Укажите прямо на ваш файл без root, который находится где-то в вашей общей папке.

5. Меньше файлов

Благодаря этому ответу я все время знаю, что пошло не так. В less.js. есть своего рода ошибка. Он не найдет все меньше файлов, которые вы импортируете, в корневом файле. Итак, вы должны добавлять правильный путь к каждому импорту !!!

Заменяйте @import "reset.less"; на @import "/public/styles/reset.less"; для каждого импорта!

et voilà ... :-)

Спасибо всем, кто помогал с этой проблемой. Также посмотрите ответ Уэса Джонсона. Я думаю, у него есть очень хорошее решение, которое как-то не сработало для меня ...

За этот ответ (над которым я тоже работал). Сначала настройте свой app.js,

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));

// This is just boilerplate you should already have
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);

Затем просто включите ссылку на файл less, но измените расширение на css. Нравится,

<link rel="stylesheet" href="components/bootstrap/less/bootstrap.css" />

И это скомпилирует components/bootstrap/less/bootstrap.less в css и предоставит его вашему клиенту.

См. документацию на less-middleware для получения дополнительной информации о том, как делать такие крутые вещи, как автоматическое уменьшение.

Я никогда не использовал меньшее количество промежуточного программного обеспечения, но я не уверен, насколько это актуально для большинства приложений. Большинству, вероятно, следует просто скомпилировать заранее, то есть: когда вы запускаете Node. Может быть так просто:

var fs      = require('fs'),
    less    = require('less');

fs.readFile('styles.less', function(err,styles) {
    if(err) return console.error('Could not open file: %s',err);
    less.render(styles.toString(), function(er,css) {
        if(er) return console.error(er);
        fs.writeFile('styles.css', css, function(e) {
            if(e) return console.error(e);
            console.log('Compiled CSS');
        });
    });
});

Структура каталогов полностью зависит от ваших предпочтений. Я бы использовал express.static для обслуживания скомпилированного файла CSS.