Ответы пользователя по тегу Pug
  • Почему вместе Jade и Less не работают?

    Не реклама Пример начального макета, писал сам, полностью на Jade и less. Просто постарайтесь сперва скомпилировать less файлы в css и в jade подключать сами css уже скомпилированные
    Главный файл
    var express = require('express')
      , routes = require('./routes')
      , lessMiddleware = require('less-middleware')
      , http = require('http')
      , path = require('path');
    var app = express();
    app.configure(function () {
      app.set('port', process.env.PORT || 80);
      app.set('views', __dirname + '/views');
      app.set('view engine', 'jade');
      app.use(express.favicon());
      app.use(express.logger('dev'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(lessMiddleware(__dirname + '/public'));
      app.use(express.static(path.join(__dirname, 'public')));
    });
    app.configure('development', function () {
      app.use(express.errorHandler());
    });
    app.get('/', routes.index);

    Файлы .Jade
    doctype 5
    html
      head
        block meta
        title= title
        link(rel='stylesheet', href='stylesheets/layout.css')
        link(rel='stylesheet', href='stylesheets/css.css')
        script(src='javascripts/jquery.js')
        script(src='javascripts/ajax.js')
        script(src='javascripts/progress.js')
        script(src='javascripts/moment.js')
        script(src='javascripts/livestamp.js')
      body
        section
          block header
          block content
          block footer

    link(rel='stylesheet', href='stylesheets/layout.css')
    link(rel='stylesheet', href='stylesheets/css.css')

    Я подключаю css файлы, а в папке со стилями лежат только less файлы, при запуске сайта сперва они компилируются , а потом запускается сам сайт.
    Если не через node
    то так

    <link rel="stylesheet/less" type="text/css" href="styles.less" />


    Далее, скачать less.js и подключить его, как script в тег head вашей страницы:

    <script src="less.js" type="text/javascript"></script>
    Ответ написан
    2 комментария