ghost... ghost... - 3 months ago 23
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
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: enter image description here

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

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.