Compile less file to css in expressjs 4.x

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.