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

Я пробовал модули "меньше" и "меньше-middleware". Я пробовал все разные кодовые snipplets, которые я нашел во всех учебниках. Нет доступной документации. Может кто-нибудь объяснить, как настроить Express.js и Less, чтобы меньше было предварительно скомпилировано?

В качестве ориентира используйте следующие вопросы:

Использовать ли модуль или модуль "меньше-middleware"? Каков официальный/поддерживаемый способ? Что лучше?
Как должна выглядеть ваша структура каталогов в /public? (какие-либо конкретные папки вам нужны? 'styles'/'less'/'css'? или это зависит от вас?)
Как настроить экспресс-приложение в отношении вашей структуры каталогов (из вопроса 2). (статические файлы и параметры компилятора или менее промежуточное ПО, какие каталоги важны здесь).
Как указать мою предварительно скомпилированную таблицу стилей из html? (с .less или .css? какой ссылочный тип? Какой путь к каталогу?)

Было бы так приятно, если бы кто-то мог ответить на это: -)

Ответ 1

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

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

1. меньше или меньше-middleware

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

2. Структура каталога:

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

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

Вам нужно две конкретные вещи, чтобы сделать работу менее корректной:

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

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

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

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

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

4. Html

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

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

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

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

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

et voilà...: -)

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

Ответ 2

Per этот ответ (с которым я также работал). Сначала настройте 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 и подаст его вашему клиенту.

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

Ответ 3

Я никогда не использовал меньше промежуточного программного обеспечения, но я не уверен, насколько это актуально для большинства приложений. Скорее всего, нужно просто скомпилировать upfront, то есть: при запуске 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.