Compile less file to css in expressjs 4.x - node.js

Question

I want to compile the less file in public folder of expressjs application.
Dependencies which I am using are
"devDependencies": {
"ejs": "^2.3.1",
"express": "^4.10.6",
"mysql": "^2.5.4"
},
"dependencies": {
"less": "^2.5.1",
"less-middleware": "^2.0.1"
}
Content in styles.less file
header {
background-image: url('../img/bg.png');
height: 380px;
input#searchBox {
width: 100%;
height: 70px;
}
}
Server file looks like below
var express = require('express'); // call express
var app = express(); // define our app using express
app.use(require('less-middleware')('public'));
// Public folder
app.use(express.static('public'));
The less file is not modified while running it on server.
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/css/styles.less
Request Method:GET
Status Code:304 Not Modified
What is the error here.
Directory structure:
Edit:
header {
background-image: url('../img/bg.png');
height: 380px;
#cloud-tag span {
color: #fff;
font-weight: 800;
letter-spacing: 2px;
}
#cloud-tag_word_0 {
font-size: 100px !important;
}
}
I added this css in less file and it is being sent to browser in same format without being compiled.

Answer 1

You must request the css file, not the less file, in your case http://localhost:3000/css/styles.css not http://localhost:3000/css/styles.less.
The middleware will compile the less file to the one you requested.

Answer 2

Looks like the way you initilize the middleware to express might be the issue . Use "__dirname + '/public'" to denote the folder.