ghost... ghost... - 1 year ago 98
Less Question

Compile less file to css in expressjs 4.x

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
// Public folder

The less file is not modified while running it on server.

Remote Address:
Request URL:http://localhost:3000/css/styles.less
Request Method:GET
Status Code:304 Not Modified

What is the error here.

Directory structure: enter image description here


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 Source

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.