Why don't Jade and Less work together?

Question

Less

I ran jade and less in the same folder. I compiled everything, it's good, but if you specify in less it's trite for H1 color: red; then it will compile to #ff0000; but on the page I update at least 100 times there are no changes, I looked through the page inspector styles.css but the properties do not work, but if I open index.html (compiled from index.jade ) after I close koala then the styles work. Can't work with both Jade and Jess at the same time?

Answer 1

Not advertising An example of the initial layout, I wrote it myself, completely in Jade and less. Just try to compile the less files to css first and include the already compiled css files in jade .

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 files

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')

I include css files, and in the folder with styles there are only less files, when the site is launched, they are first compiled, and then the site itself is launched.
If not through node
then so
Next, download less.js and include it as a script in the head tag of your page:

<script src="less.js" type="text/javascript"></script>